sp-asset

NPM 1.11.2

View Storybook

Try it on Stackblitz
Overview API Changelog

Description

Use an <sp-asset> element to visually represent a file, folder or image in your application. File and folder representations will center themselves horizontally and vertically in the space provided to the element. Images will be contained to the element, growing to the element's full height while centering itself within the width provided.

Installation

See it on NPM! How big is this package in your project? Try it on Stackblitz

yarn add @spectrum-web-components/asset

Import the side effectful registration of <sp-asset> via:

import '@spectrum-web-components/asset/sp-asset.js';

When looking to leverage the Asset base class as a type and/or for extension purposes, do so via:

import { Asset } from '@spectrum-web-components/asset';

Example

<sp-asset style="height: 128px">
    <img src="https://picsum.photos/500/500" alt="Demo Image" />
</sp-asset>

File

<div class="flex">
    <sp-asset variant="file"></sp-asset>
    <sp-asset variant="file" label="Named File Asset"></sp-asset>
</div>

Folder

<div class="flex">
    <sp-asset variant="folder"></sp-asset>
    <sp-asset variant="folder" label="Named Folder Asset"></sp-asset>
</div>

Patch Changes

  • Updated dependencies [6f5419a]:
    • @spectrum-web-components/core@0.0.4
    • @spectrum-web-components/base@1.11.2

1.11.1

Patch Changes

  • Updated dependencies [95e1c25]:
    • @spectrum-web-components/core@0.0.3
    • @spectrum-web-components/base@1.11.1

1.11.0

Patch Changes

  • Updated dependencies [283f0fe, 1d76b70, 9cb816b]:
    • @spectrum-web-components/core@0.0.2
    • @spectrum-web-components/base@1.11.0

1.10.0

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/base@1.10.0

1.9.1

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/base@1.9.1

1.9.0

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/base@1.9.0

1.8.0

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/base@1.8.0

1.7.0

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/base@1.7.0

1.6.0

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/base@1.6.0

1.5.0

Patch Changes

  • #5271 165a904 Thanks @renovate! - Remove unnecessary system theme references to reduce complexity for components that don't need the additional mapping layer.

  • Updated dependencies []:

    • @spectrum-web-components/base@1.5.0

1.4.0

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/base@1.4.0

1.3.0

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/base@1.3.0

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.2.0 (2025-02-27)

Note: Version bump only for package @spectrum-web-components/asset

1.1.2 (2025-02-12)

Note: Version bump only for package @spectrum-web-components/asset

1.1.1 (2025-01-29)

Note: Version bump only for package @spectrum-web-components/asset

1.1.0 (2025-01-29)

Bug Fixes

  • lock prerelease versions for Spectrum CSS (#5014) (8aa7734)

1.0.1 (2024-11-11)

Note: Version bump only for package @spectrum-web-components/asset

1.0.0 (2024-10-31)

Note: Version bump only for package @spectrum-web-components/asset

0.49.0 (2024-10-15)

Note: Version bump only for package @spectrum-web-components/asset

0.48.1 (2024-10-01)

Note: Version bump only for package @spectrum-web-components/asset

0.48.0 (2024-09-17)

Note: Version bump only for package @spectrum-web-components/asset

0.47.2 (2024-09-03)

Note: Version bump only for package @spectrum-web-components/asset

0.47.1 (2024-08-27)

Note: Version bump only for package @spectrum-web-components/asset

0.47.0 (2024-08-20)

Note: Version bump only for package @spectrum-web-components/asset

0.46.0 (2024-08-08)

Note: Version bump only for package @spectrum-web-components/asset

0.45.0 (2024-07-30)

Note: Version bump only for package @spectrum-web-components/asset

0.44.0 (2024-07-15)

Note: Version bump only for package @spectrum-web-components/asset

0.43.0 (2024-06-11)

Note: Version bump only for package @spectrum-web-components/asset

0.42.5 (2024-05-24)

Note: Version bump only for package @spectrum-web-components/asset

0.42.4 (2024-05-14)

Note: Version bump only for package @spectrum-web-components/asset

0.42.3 (2024-05-01)

Note: Version bump only for package @spectrum-web-components/asset

0.42.2 (2024-04-03)

Note: Version bump only for package @spectrum-web-components/asset

0.42.1 (2024-04-02)

Note: Version bump only for package @spectrum-web-components/asset

0.42.0 (2024-03-19)

Features

  • asset: use core tokens (99e76f4)

0.41.2 (2024-03-05)

Note: Version bump only for package @spectrum-web-components/asset

0.41.1 (2024-02-22)

Note: Version bump only for package @spectrum-web-components/asset

0.41.0 (2024-02-13)

Note: Version bump only for package @spectrum-web-components/asset

0.40.5 (2024-02-05)

Note: Version bump only for package @spectrum-web-components/asset

0.40.4 (2024-01-29)

Note: Version bump only for package @spectrum-web-components/asset

0.40.3 (2024-01-11)

Note: Version bump only for package @spectrum-web-components/asset

0.40.2 (2023-12-18)

Note: Version bump only for package @spectrum-web-components/asset

0.40.1 (2023-12-05)

Note: Version bump only for package @spectrum-web-components/asset

0.40.0 (2023-11-16)

Note: Version bump only for package @spectrum-web-components/asset

0.39.4 (2023-11-02)

Note: Version bump only for package @spectrum-web-components/asset

0.39.3 (2023-10-18)

Note: Version bump only for package @spectrum-web-components/asset

0.39.2 (2023-10-13)

Note: Version bump only for package @spectrum-web-components/asset

0.39.1 (2023-10-06)

Note: Version bump only for package @spectrum-web-components/asset

0.39.0 (2023-09-25)

Note: Version bump only for package @spectrum-web-components/asset

0.38.0 (2023-09-05)

Note: Version bump only for package @spectrum-web-components/asset

0.37.0 (2023-08-18)

Note: Version bump only for package @spectrum-web-components/asset

0.36.0 (2023-08-18)

Note: Version bump only for package @spectrum-web-components/asset

0.35.0 (2023-07-31)

Note: Version bump only for package @spectrum-web-components/asset

0.34.0 (2023-07-11)

Note: Version bump only for package @spectrum-web-components/asset

0.33.2 (2023-06-14)

Note: Version bump only for package @spectrum-web-components/asset

0.33.0 (2023-06-08)

Note: Version bump only for package @spectrum-web-components/asset

0.32.0 (2023-06-01)

Note: Version bump only for package @spectrum-web-components/asset

0.31.0 (2023-05-17)

Note: Version bump only for package @spectrum-web-components/asset

0.30.0 (2023-05-03)

Bug Fixes

  • asset: include alternative text for the file/folder versions (92a091c)
  • asset: surface label attribute for folder/file "assets" (861696b)
  • ensure browser understandable extensions (f4e59f7)
  • include default export in the "exports" fields (f32407d)
  • include the "types" entry in package.json files (b432f59)
  • update file path access (8898bf7)
  • update latest Spectrum CSS beta releases (d8d3acc)
  • update side effect listings (8160d3a)
  • update to latest spectrum-css packages (a5ca19f)
  • use latest @spectrum-css/* versions (c35eb86)

Features

  • adopt DNA@7 base Spectrum CSS (e08cafd)
  • asset: add the asset pattern (a7c00bb)
  • asset: update spectrum css input (b3f0d70)
  • include all Dev Mode files in side effects (f70817c)
  • shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)
  • use latest exports specification (a7ecf4b)

0.7.9 (2023-04-24)

Note: Version bump only for package @spectrum-web-components/asset

0.7.8 (2023-04-05)

Note: Version bump only for package @spectrum-web-components/asset

0.7.7 (2023-03-22)

Note: Version bump only for package @spectrum-web-components/asset

0.7.6 (2023-02-08)

Note: Version bump only for package @spectrum-web-components/asset

0.7.5 (2023-01-23)

Note: Version bump only for package @spectrum-web-components/asset

0.7.4 (2023-01-09)

Note: Version bump only for package @spectrum-web-components/asset

0.7.3 (2022-12-08)

Note: Version bump only for package @spectrum-web-components/asset

0.7.2 (2022-11-21)

Note: Version bump only for package @spectrum-web-components/asset

0.7.1 (2022-11-14)

Note: Version bump only for package @spectrum-web-components/asset

0.7.0 (2022-08-09)

Features

  • include all Dev Mode files in side effects (f70817c)

0.6.11 (2022-08-04)

Note: Version bump only for package @spectrum-web-components/asset

0.6.10 (2022-07-18)

Note: Version bump only for package @spectrum-web-components/asset

0.6.9 (2022-06-29)

Note: Version bump only for package @spectrum-web-components/asset

0.6.8 (2022-06-07)

Note: Version bump only for package @spectrum-web-components/asset

0.6.7 (2022-05-12)

Note: Version bump only for package @spectrum-web-components/asset

0.6.6 (2022-04-21)

Note: Version bump only for package @spectrum-web-components/asset

0.6.5 (2022-03-08)

Note: Version bump only for package @spectrum-web-components/asset

0.6.4 (2022-03-04)

Note: Version bump only for package @spectrum-web-components/asset

0.6.3 (2022-02-22)

Note: Version bump only for package @spectrum-web-components/asset

0.6.2 (2022-01-26)

Note: Version bump only for package @spectrum-web-components/asset

0.6.1 (2021-12-13)

Note: Version bump only for package @spectrum-web-components/asset

0.6.0 (2021-11-08)

Note: Version bump only for package @spectrum-web-components/asset

0.5.1 (2021-11-08)

Note: Version bump only for package @spectrum-web-components/asset

0.5.0 (2021-11-02)

Features

  • adopt DNA@7 base Spectrum CSS (e08cafd)

0.4.9 (2021-09-20)

Note: Version bump only for package @spectrum-web-components/asset

0.4.8 (2021-08-24)

Note: Version bump only for package @spectrum-web-components/asset

0.4.7 (2021-07-22)

Note: Version bump only for package @spectrum-web-components/asset

0.4.6 (2021-06-16)

Note: Version bump only for package @spectrum-web-components/asset

0.4.5 (2021-05-12)

Note: Version bump only for package @spectrum-web-components/asset

0.4.4 (2021-04-09)

Note: Version bump only for package @spectrum-web-components/asset

0.4.3 (2021-03-29)

Bug Fixes

  • asset: surface label attribute for folder/file "assets" (861696b)

0.4.2 (2021-03-22)

Note: Version bump only for package @spectrum-web-components/asset

0.4.1 (2021-03-05)

Note: Version bump only for package @spectrum-web-components/asset

0.4.0 (2021-03-04)

Features

  • use latest exports specification (a7ecf4b)

0.3.1 (2021-02-11)

Bug Fixes

  • update to latest spectrum-css packages (a5ca19f)

0.3.0 (2021-01-21)

Bug Fixes

  • update file path access (8898bf7)
  • asset: include alternative text for the file/folder versions (92a091c)
  • include the "types" entry in package.json files (b432f59)
  • update latest Spectrum CSS beta releases (d8d3acc)
  • use latest @spectrum-css/* versions (c35eb86)

Features

  • asset: update spectrum css input (b3f0d70)

0.2.0 (2021-01-13)

Bug Fixes

  • update file path access (8898bf7)
  • asset: include alternative text for the file/folder versions (92a091c)
  • include the "types" entry in package.json files (b432f59)
  • update latest Spectrum CSS beta releases (d8d3acc)
  • use latest @spectrum-css/* versions (c35eb86)

Features

  • asset: update spectrum css input (b3f0d70)

0.1.5 (2020-10-12)

Note: Version bump only for package @spectrum-web-components/asset

0.1.4 (2020-10-12)

Bug Fixes

  • include default export in the "exports" fields (f32407d)

0.1.3 (2020-09-25)

Bug Fixes

  • update side effect listings (8160d3a)

0.1.2 (2020-08-31)

Note: Version bump only for package @spectrum-web-components/asset

0.1.1 (2020-08-19)

Bug Fixes

  • ensure browser understandable extensions (f4e59f7)

0.1.0 (2020-07-22)

Features

  • asset: add the asset pattern (a7c00bb)

Attributes and Properties

Property Attribute Type Default Description alt alt string | undefined Alternative text for the image. Required for accessibility when using src. crossorigin crossorigin CrossOrigin | undefined CORS setting for cross-origin images. - 'anonymous': Request without credentials - 'use-credentials': Request with credentials decoding decoding DecodingType | undefined Image decoding hint for the browser. - 'sync': Decode synchronously for atomic presentation - 'async': Decode asynchronously to avoid delaying other content - 'auto': Let the browser decide (default) error error boolean false Indicates an error state for the asset. When true, displays an error indicator. height height number | undefined Height of the image in pixels. Used for aspect ratio calculation and layout hints. label label string '' Accessible label for the asset's file or folder variant. loading loading LoadingType | undefined Loading behavior for the image. - 'lazy': Defers loading until the image is near the viewport - 'eager': Loads immediately objectFit object-fit ObjectFit | undefined How the image should be resized to fit its container. - 'contain': Scale to fit while maintaining aspect ratio - 'cover': Scale to fill container while maintaining aspect ratio - 'fill': Stretch to fill container - 'none': Do not resize - 'scale-down': Use whichever is smaller: none or contain objectPosition object-position string | undefined Position of the image within its container when using object-fit. Accepts standard CSS object-position values (e.g., 'center', 'top left', '50% 50%'). referrerpolicy referrerpolicy ReferrerPolicy | undefined Referrer policy for image requests. sizes sizes string | undefined Sizes for responsive images. Defines image display size for different viewport widths. Example: "(max-width: 600px) 480px, 800px" src src string | undefined The image source URL. When provided, renders an element directly. srcset srcset string | undefined Responsive image sources. A comma-separated list of image URLs with optional width/pixel density descriptors. Example: "image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w" variant variant AssetVariant | undefined The variant of the asset. When not provided and no src is set, slot content is rendered (e.g., an image). width width number | undefined Width of the image in pixels. Used for aspect ratio calculation and layout hints.

Slots

Name Description default slot content to be displayed in the asset when an acceptable value for `file` is not present