@duetds/components 6.0.3 → 6.0.5

package/lib/dist-custom-elements/p-266411cf.js

@@ -0,0 +1,307 @@
+/*!
+ * Built with Duet Design System
+ */
+const colorWarning = "rgb(247, 178, 40)";
+const colorGrayDarker = "rgb(101, 119, 135)";
+const colorGrayLighter = "rgb(245, 248, 250)";
+const colorCategoryHome = "rgb(211, 36, 131)";
+const colorPrimary = "rgb(0, 119, 179)";
+const colorCategoryVehicle = "rgb(54, 74, 129)";
+const colorSuccess = "rgb(0, 135, 90)";
+const colorCategoryFamily = "rgb(11, 114, 136)";
+const colorPrimaryLightest = "rgb(243, 249, 252)";
+const colorPrimaryLighter = "rgb(230, 242, 248)";
+const colorBrandBlue = "rgb(0, 161, 212)";
+const colorPrimaryDark = "rgb(0, 77, 128)";
+const colorGrayLightest = "rgb(255, 255, 255)";
+const colorCategoryFinance = "rgb(122, 1, 196)";
+const colorGrayDark = "rgb(144, 149, 153)";
+const colorGrayLight = "rgb(225, 227, 230)";
+const colorSecondary = "rgb(0, 41, 77)";
+const colorCategoryPet = "rgb(168, 1, 78)";
+const colorPrimaryLight = "rgb(205, 229, 241)";
+const colorCategoryTravel = "rgb(213, 66, 3)";
+const colorGray = "rgb(207, 210, 212)";
+const colorDanger = "rgb(222, 35, 98)";
+const colorGrayDarkerTurva = "rgb(68, 68, 69)";
+const colorGrayLighterTurva = "rgb(245, 245, 247)";
+const colorCategoryHomeTurva = "rgb(161, 10, 78)";
+const colorPrimaryTurva = "rgb(198, 12, 48)";
+const colorCategoryVehicleTurva = "rgb(23, 28, 58)";
+const colorSuccessTurva = "rgb(8, 135, 78)";
+const colorPrimaryLightestTurva = "rgb(252, 243, 244)";
+const colorCategoryFamilyTurva = "rgb(199, 12, 112)";
+const colorCategoryUnionTurva = "rgb(169, 69, 124)";
+const colorPrimaryLighterTurva = "rgb(249, 230, 234)";
+const colorPrimaryDarkTurva = "rgb(148, 9, 37)";
+const colorGrayLightestTurva = "rgb(255, 255, 255)";
+const colorGrayDarkTurva = "rgb(116, 116, 117)";
+const colorGrayLightTurva = "rgb(228, 228, 230)";
+const colorBrandGrayTurva = "rgb(178, 180, 179)";
+const colorSecondaryTurva = "rgb(23, 28, 58)";
+const colorPrimaryLightTurva = "rgb(244, 207, 214)";
+const colorCategoryTravelTurva = "rgb(9, 129, 148)";
+const colorGrayTurva = "rgb(207, 207, 209)";
+const colorDangerTurva = "rgb(224, 42, 13)";
+const colorWarningTurva = "rgb(250, 164, 15)";
+const colorData07 = "rgb(192, 101, 247)";
+const colorData08 = "rgb(0, 105, 191)";
+const colorData09 = "rgb(19, 120, 53)";
+const colorData10 = "rgb(179, 60, 24)";
+const colorData11 = "rgb(13, 163, 166)";
+const colorData01 = "rgb(122, 1, 196)";
+const colorData12 = "rgb(11, 114, 136)";
+const colorData02 = "rgb(0, 155, 204)";
+const colorData13 = "rgb(179, 137, 24)";
+const colorData03 = "rgb(27, 171, 75)";
+const colorData14 = "rgb(128, 98, 17)";
+const colorData04 = "rgb(255, 86, 34)";
+const colorData15 = "rgb(0, 41, 77)";
+const colorData05 = "rgb(245, 76, 154)";
+const colorData06 = "rgb(194, 21, 101)";
+const fontWeightExtraBold = "800";
+const letterSpacingHeading = "-0.01rem";
+const fontFamilyHeadingTurva = "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+const fontFamilyTextTurva = "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+const fontFamilyHeading = "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+const fontFamilyText = "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+const fontWeightBold = "700";
+const fontWeightNormal = "400";
+const fontWeightSemiBold = "600";
+const fontSizeXxxxLarge = "4.5rem";
+const fontSizeXxxLarge = "3rem";
+const fontSizeXxLarge = "2.25rem";
+const fontSizeXLarge = "1.5rem";
+const fontSizeLarge = "1.25rem";
+const fontSizeMedium = "1rem";
+const fontSizeSmall = "0.875rem";
+const fontSizeXSmall = "0.75rem";
+const radiusSharp = "0";
+const radiusDefault = "4px";
+const radiusCircle = "50%";
+const radiusPill = "20rem";
+const shadowTooltipTurva = "0 2px 10px 0 rgba(117, 117, 117, 0.13)";
+const shadowDefault = "0 2px 6px 0 rgba(0, 41, 77, 0.07)";
+const shadowTooltip = "0 2px 10px 0 rgba(0, 41, 77, 0.07)";
+const shadowCardTurva = "0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)";
+const shadowModal = "0 2px 20px 0 rgba(0, 0, 0, 0.2)";
+const shadowCard = "0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)";
+const shadowHoverTurva = "0 2px 10px 0 rgba(117, 117, 117, 0.15)";
+const shadowHover = "0 2px 10px 0 rgba(0, 41, 77, 0.1)";
+const shadowDefaultTurva = "0 2px 6px 0 rgba(117, 117, 117, 0.13)";
+const spaceXxSmall = "4px";
+const spaceLarge = "20px";
+const spaceXSmall = "8px";
+const spaceXxxSmall = "2px";
+const spaceSmall = "12px";
+const spaceMedium = "16px";
+const spaceXxLarge = "36px";
+const spaceXxxxLarge = "72px";
+const spaceXxxxxLarge = "94px";
+const spaceXxxLarge = "48px";
+const spaceXLarge = "28px";
+const sizeIconXxLarge = "48px";
+const sizeFormBorder = "1px";
+const sizeStepMedium = "40px";
+const sizeButtonMinWidth = "8rem";
+const sizeHeader = "4rem";
+const sizeIconXxxLarge = "72px";
+const sizeIconXLarge = "36px";
+const sizeIconXxSmall = "10px";
+const sizeStepSmall = "30px";
+const sizeNavigation = "3rem";
+const sizeIconLarge = "30px";
+const sizeLayoutMaxWidth = "1110px";
+const sizeTappableSquare = "48px";
+const sizeIconXSmall = "16px";
+const sizeIconXxxSmall = "7px";
+const sizeButtonBorder = "2px";
+const sizeButtonTinyBorder = "1px";
+const sizeIconMedium = "24px";
+const sizeIconSmall = "20px";
+const opacity85 = "0.85";
+const opacity75 = "0.75";
+const opacity50 = "0.50";
+const opacity30 = "0.30";
+const zIndexMaskButtons = "250";
+const zIndexDropdown = "600";
+const zIndexSpinner = "800";
+const zIndexDefault = "1";
+const zIndexToast = "500";
+const zIndexPopup = "950";
+const zIndexModal = "900";
+const zIndexSticky = "300";
+const zIndexMasked = "100";
+const zIndexDeep = "-999999";
+const zIndexOverlay = "700";
+const zIndexMask = "200";
+const zIndexHeader = "400";
+const lineHeightMedium = "1.5";
+const lineHeightSmall = "1.25";
+const lineHeightXSmall = "1.1";
+const transitionQuickly = "300ms ease";
+const transitionSlowly = "600ms ease";
+const mediaQueryXxxLarge = "'(min-width: 106.25em)'";
+const mediaQueryXLarge = "'(min-width: 64.0625em)'";
+const mediaQueryMedium = "'(min-width: 48em)'";
+const mediaQueryLarge = "'(min-width: 62em)'";
+const mediaQueryXxLarge = "'(min-width: 76.25em)'";
+const mediaQueryXSmall = "'(max-width: 35.9375em)'";
+const mediaQueryXxxSmall = "'(max-width: 20.5em)'";
+const mediaQuerySmall = "'(min-width: 36em)'";
+const mediaQueryXxSmall = "'(max-width: 22.5em)'";
+
+const tokens = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	colorWarning: colorWarning,
+	colorGrayDarker: colorGrayDarker,
+	colorGrayLighter: colorGrayLighter,
+	colorCategoryHome: colorCategoryHome,
+	colorPrimary: colorPrimary,
+	colorCategoryVehicle: colorCategoryVehicle,
+	colorSuccess: colorSuccess,
+	colorCategoryFamily: colorCategoryFamily,
+	colorPrimaryLightest: colorPrimaryLightest,
+	colorPrimaryLighter: colorPrimaryLighter,
+	colorBrandBlue: colorBrandBlue,
+	colorPrimaryDark: colorPrimaryDark,
+	colorGrayLightest: colorGrayLightest,
+	colorCategoryFinance: colorCategoryFinance,
+	colorGrayDark: colorGrayDark,
+	colorGrayLight: colorGrayLight,
+	colorSecondary: colorSecondary,
+	colorCategoryPet: colorCategoryPet,
+	colorPrimaryLight: colorPrimaryLight,
+	colorCategoryTravel: colorCategoryTravel,
+	colorGray: colorGray,
+	colorDanger: colorDanger,
+	colorGrayDarkerTurva: colorGrayDarkerTurva,
+	colorGrayLighterTurva: colorGrayLighterTurva,
+	colorCategoryHomeTurva: colorCategoryHomeTurva,
+	colorPrimaryTurva: colorPrimaryTurva,
+	colorCategoryVehicleTurva: colorCategoryVehicleTurva,
+	colorSuccessTurva: colorSuccessTurva,
+	colorPrimaryLightestTurva: colorPrimaryLightestTurva,
+	colorCategoryFamilyTurva: colorCategoryFamilyTurva,
+	colorCategoryUnionTurva: colorCategoryUnionTurva,
+	colorPrimaryLighterTurva: colorPrimaryLighterTurva,
+	colorPrimaryDarkTurva: colorPrimaryDarkTurva,
+	colorGrayLightestTurva: colorGrayLightestTurva,
+	colorGrayDarkTurva: colorGrayDarkTurva,
+	colorGrayLightTurva: colorGrayLightTurva,
+	colorBrandGrayTurva: colorBrandGrayTurva,
+	colorSecondaryTurva: colorSecondaryTurva,
+	colorPrimaryLightTurva: colorPrimaryLightTurva,
+	colorCategoryTravelTurva: colorCategoryTravelTurva,
+	colorGrayTurva: colorGrayTurva,
+	colorDangerTurva: colorDangerTurva,
+	colorWarningTurva: colorWarningTurva,
+	colorData07: colorData07,
+	colorData08: colorData08,
+	colorData09: colorData09,
+	colorData10: colorData10,
+	colorData11: colorData11,
+	colorData01: colorData01,
+	colorData12: colorData12,
+	colorData02: colorData02,
+	colorData13: colorData13,
+	colorData03: colorData03,
+	colorData14: colorData14,
+	colorData04: colorData04,
+	colorData15: colorData15,
+	colorData05: colorData05,
+	colorData06: colorData06,
+	fontWeightExtraBold: fontWeightExtraBold,
+	letterSpacingHeading: letterSpacingHeading,
+	fontFamilyHeadingTurva: fontFamilyHeadingTurva,
+	fontFamilyTextTurva: fontFamilyTextTurva,
+	fontFamilyHeading: fontFamilyHeading,
+	fontFamilyText: fontFamilyText,
+	fontWeightBold: fontWeightBold,
+	fontWeightNormal: fontWeightNormal,
+	fontWeightSemiBold: fontWeightSemiBold,
+	fontSizeXxxxLarge: fontSizeXxxxLarge,
+	fontSizeXxxLarge: fontSizeXxxLarge,
+	fontSizeXxLarge: fontSizeXxLarge,
+	fontSizeXLarge: fontSizeXLarge,
+	fontSizeLarge: fontSizeLarge,
+	fontSizeMedium: fontSizeMedium,
+	fontSizeSmall: fontSizeSmall,
+	fontSizeXSmall: fontSizeXSmall,
+	radiusSharp: radiusSharp,
+	radiusDefault: radiusDefault,
+	radiusCircle: radiusCircle,
+	radiusPill: radiusPill,
+	shadowTooltipTurva: shadowTooltipTurva,
+	shadowDefault: shadowDefault,
+	shadowTooltip: shadowTooltip,
+	shadowCardTurva: shadowCardTurva,
+	shadowModal: shadowModal,
+	shadowCard: shadowCard,
+	shadowHoverTurva: shadowHoverTurva,
+	shadowHover: shadowHover,
+	shadowDefaultTurva: shadowDefaultTurva,
+	spaceXxSmall: spaceXxSmall,
+	spaceLarge: spaceLarge,
+	spaceXSmall: spaceXSmall,
+	spaceXxxSmall: spaceXxxSmall,
+	spaceSmall: spaceSmall,
+	spaceMedium: spaceMedium,
+	spaceXxLarge: spaceXxLarge,
+	spaceXxxxLarge: spaceXxxxLarge,
+	spaceXxxxxLarge: spaceXxxxxLarge,
+	spaceXxxLarge: spaceXxxLarge,
+	spaceXLarge: spaceXLarge,
+	sizeIconXxLarge: sizeIconXxLarge,
+	sizeFormBorder: sizeFormBorder,
+	sizeStepMedium: sizeStepMedium,
+	sizeButtonMinWidth: sizeButtonMinWidth,
+	sizeHeader: sizeHeader,
+	sizeIconXxxLarge: sizeIconXxxLarge,
+	sizeIconXLarge: sizeIconXLarge,
+	sizeIconXxSmall: sizeIconXxSmall,
+	sizeStepSmall: sizeStepSmall,
+	sizeNavigation: sizeNavigation,
+	sizeIconLarge: sizeIconLarge,
+	sizeLayoutMaxWidth: sizeLayoutMaxWidth,
+	sizeTappableSquare: sizeTappableSquare,
+	sizeIconXSmall: sizeIconXSmall,
+	sizeIconXxxSmall: sizeIconXxxSmall,
+	sizeButtonBorder: sizeButtonBorder,
+	sizeButtonTinyBorder: sizeButtonTinyBorder,
+	sizeIconMedium: sizeIconMedium,
+	sizeIconSmall: sizeIconSmall,
+	opacity85: opacity85,
+	opacity75: opacity75,
+	opacity50: opacity50,
+	opacity30: opacity30,
+	zIndexMaskButtons: zIndexMaskButtons,
+	zIndexDropdown: zIndexDropdown,
+	zIndexSpinner: zIndexSpinner,
+	zIndexDefault: zIndexDefault,
+	zIndexToast: zIndexToast,
+	zIndexPopup: zIndexPopup,
+	zIndexModal: zIndexModal,
+	zIndexSticky: zIndexSticky,
+	zIndexMasked: zIndexMasked,
+	zIndexDeep: zIndexDeep,
+	zIndexOverlay: zIndexOverlay,
+	zIndexMask: zIndexMask,
+	zIndexHeader: zIndexHeader,
+	lineHeightMedium: lineHeightMedium,
+	lineHeightSmall: lineHeightSmall,
+	lineHeightXSmall: lineHeightXSmall,
+	transitionQuickly: transitionQuickly,
+	transitionSlowly: transitionSlowly,
+	mediaQueryXxxLarge: mediaQueryXxxLarge,
+	mediaQueryXLarge: mediaQueryXLarge,
+	mediaQueryMedium: mediaQueryMedium,
+	mediaQueryLarge: mediaQueryLarge,
+	mediaQueryXxLarge: mediaQueryXxLarge,
+	mediaQueryXSmall: mediaQueryXSmall,
+	mediaQueryXxxSmall: mediaQueryXxxSmall,
+	mediaQuerySmall: mediaQuerySmall,
+	mediaQueryXxSmall: mediaQueryXxSmall
+});
+
+export { mediaQueryLarge as a, mediaQueryXLarge as b, mediaQueryXxLarge as c, mediaQueryXxxLarge as d, mediaQuerySmall as e, sizeHeader as f, colorGrayLightest as g, colorBrandGrayTurva as h, colorPrimaryTurva as i, colorBrandBlue as j, colorGrayTurva as k, colorPrimary as l, mediaQueryMedium as m, colorGray as n, sizeNavigation as s, tokens as t };

package/lib/dist-custom-elements/p-2bb345c0.js

@@ -0,0 +1,193 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, b as Host } from './p-1ad6b04e.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { d as defineCustomElement$1 } from './p-4f516732.js';
+
+const duetScrollableCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}:host{position:relative !important}:host .duet-scrollable-items{display:flex}:host .duet-scrollable-items .duet-scrollable-button{position:relative;flex:0 0 auto;flex-basis:40px;padding:10px;cursor:pointer}:host .duet-scrollable-items .duet-scrollable-button:active{transform:scale(0.8)}:host .duet-scrollable-items .duet-scrollable-button--left{left:-12px}:host .duet-scrollable-items .duet-scrollable-button--right{right:-12px}:host .duet-scrollable-items .duet-scrollable-button--occluded{display:none}:host .duet-scrollable-items .duet-scrollable-list{display:flex;flex-wrap:nowrap;gap:20px;padding-top:2px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-margin:0 20px;-ms-overflow-style:-ms-autohiding-scrollbar;-webkit-overflow-scrolling:touch;}:host .duet-scrollable-items .duet-scrollable-list::-webkit-scrollbar{display:none}::slotted(*){scroll-snap-align:center;margin-left:0;-webkit-transition:-webkit-transform 0.2s ease-in-out;transition:-webkit-transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out}";
+
+const DuetScrollable = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Private variables and constants index
+     */
+    this.currentIndex = 0;
+    this.tabListElement = undefined;
+    this.tabListClass = "duet-scrollable-list";
+    this.tablistAtStart = true;
+    this.isTabContentSmallerThanWrapper = false;
+    this.tablistAtEnd = false;
+    this.childrenData = {};
+    this.resizeObserver = new ResizeObserver(entries => {
+      var _a, _b, _c, _d;
+      // otherwise, something is wrong, expecting 1 element only
+      if ((entries === null || entries === void 0 ? void 0 : entries.length) === 1) {
+        const currentWidth = (_b = (_a = entries[0]) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width;
+        const scrollWidth = (_d = (_c = entries[0]) === null || _c === void 0 ? void 0 : _c.target) === null || _d === void 0 ? void 0 : _d.scrollWidth;
+        // in order to avoid state "jumping" on the boundary condition we add a few pixels to the comparison
+        this.isTabContentSmallerThanWrapper = scrollWidth > currentWidth + 5;
+      }
+    });
+    /**
+     * Theme of duet-tab-scrollable. When used this will override the color setting and
+     * use "primary" or "primary-turva" as the color depending on which theme
+     * is chosen.
+     */
+    this.theme = "";
+    /**
+     * Optional identifier to add to buttons in the tab group
+     */
+    this.identifier = "";
+    /**
+     * Selected element
+     */
+    this.selected = 0;
+  }
+  watchPropHandler(newValue) {
+    this.scrollToTab(newValue, "center");
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    const slotted = this.host.children;
+    this.childrenData = { hasChildren: slotted && slotted.length > 0, numberOfChildren: slotted && slotted.length };
+  }
+  componentDidLoad() {
+    this.resizeObserver.observe(this.tabListElement);
+  }
+  disconnectedCallback() {
+    this.resizeObserver.disconnect();
+  }
+  /**
+   * Private methods.
+   */
+  getLastVisibleElement() {
+    const clientWidth = this.tabListElement.clientWidth;
+    const xValues = Array.from(this.host.querySelectorAll("button")).findIndex(element => element.getBoundingClientRect().x > clientWidth);
+    return xValues;
+  }
+  getFirstVisibleElement() {
+    const buttonCollection = this.host.querySelectorAll("button");
+    // reverse the array because we want the first invisible element form the middle, not the first in the list
+    const arrayOfXValues = Array.from(buttonCollection).map(el => el.getBoundingClientRect().x - el.getBoundingClientRect().width);
+    const xValues = arrayOfXValues.findIndex(element => {
+      return element > 0;
+    });
+    return xValues;
+  }
+  updateScrollButtons(container = this.tabListElement) {
+    if (container.scrollLeft <= 0) {
+      this.tablistAtStart = true;
+    }
+    else if (container.scrollLeft > 0) {
+      this.tablistAtStart = false;
+    }
+    if (container.clientWidth + container.scrollLeft + 10 >= container.scrollWidth) {
+      this.tablistAtEnd = true;
+    }
+    else if (container.clientWidth + container.scrollLeft + 10 < container.scrollWidth) {
+      this.tablistAtEnd = false;
+    }
+  }
+  scrollToTab(index = this.currentIndex, inline) {
+    if (!this.childrenData.hasChildren) {
+      return;
+    }
+    if (index + 1 >= this.childrenData.numberOfChildren) {
+      index = this.childrenData.numberOfChildren - 1;
+    }
+    if (index < 0) {
+      index = 0;
+    }
+    const buttons = this.host.querySelectorAll("button");
+    // store previous position
+    let prevPosition = buttons[0].getBoundingClientRect().x;
+    // iterations to run
+    let ticksWhereScrollDidNotHappen = 5;
+    const getAnimationFrame = () => {
+      // if we get the same value enter the logic loop
+      if (buttons[0].getBoundingClientRect().x === prevPosition) {
+        ticksWhereScrollDidNotHappen--;
+        // When iteration is not complete run the calculation again
+        if (ticksWhereScrollDidNotHappen !== 0) {
+          window.requestAnimationFrame(getAnimationFrame);
+          return;
+        }
+        this.updateScrollButtons();
+      }
+      else {
+        window.requestAnimationFrame(getAnimationFrame);
+        prevPosition = buttons[0].getBoundingClientRect().x;
+      }
+    };
+    buttons[index].scrollIntoView({ behavior: "smooth", inline });
+    window.requestAnimationFrame(getAnimationFrame);
+  }
+  scrollLeft() {
+    this.tablistAtEnd = false;
+    const first = this.getFirstVisibleElement() - 1;
+    this.scrollToTab(first, "center");
+  }
+  scrollRight() {
+    this.tablistAtStart = false;
+    const last = this.getLastVisibleElement() + 1;
+    this.scrollToTab(last, "center");
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, { class: {
+        "duet-theme-turva": this.theme === "turva",
+        "duet-theme-default": this.theme === "default",
+      } }, h("div", { class: "duet-scrollable-items" }, h("button", { part: `${this.identifier}-button-left`, "aria-hidden": "true", class: {
+        "duet-scrollable-button": true,
+        "duet-scrollable-button--left": true,
+        "duet-scrollable-button--occluded": !this.isTabContentSmallerThanWrapper,
+      }, onClick: () => this.scrollLeft(), disabled: this.tablistAtStart, tabindex: "-1" }, h("duet-icon", { name: "action-arrow-left-small", size: "small", margin: "none" })), h("div", { class: this.tabListClass, onScroll: () => this.updateScrollButtons(), ref: element => (this.tabListElement = element) }, h("slot", null)), h("button", { part: `${this.identifier}-button-right`, "aria-hidden": "true", class: {
+        "duet-scrollable-button": true,
+        "duet-scrollable-button--right": true,
+        "duet-scrollable-button--occluded": !this.isTabContentSmallerThanWrapper,
+      }, onClick: () => this.scrollRight(), disabled: this.tablistAtEnd, tabindex: "-1" }, h("duet-icon", { name: "action-arrow-right-small", size: "small", margin: "none" })))));
+  }
+  get host() { return this; }
+  static get watchers() { return {
+    "selected": ["watchPropHandler"]
+  }; }
+  static get style() { return duetScrollableCss; }
+}, [1, "duet-scrollable", {
+    "theme": [1025],
+    "identifier": [1],
+    "selected": [1026],
+    "tablistAtStart": [32],
+    "isTabContentSmallerThanWrapper": [32],
+    "tablistAtEnd": [32],
+    "childrenData": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-scrollable", "duet-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-scrollable":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetScrollable);
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { DuetScrollable as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-32a67b55.js

@@ -0,0 +1,87 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, b as Host } from './p-1ad6b04e.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { c as createID } from './p-c1325e35.js';
+import { d as defineCustomElement$1 } from './p-92012dcc.js';
+
+const duetFieldsetCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:12px !important;display:block;width:100%}:host(.duet-m-0){margin:0 !important}fieldset{border:0}legend{position:absolute !important;top:0;width:1px !important;height:1px !important;padding:0 !important;overflow:hidden !important;clip:rect(1px, 1px, 1px, 1px) !important;border:0 !important}.duet-legend-wrapper{position:relative;display:block;width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;line-height:1.5;color:#00294d;text-align:left;background:transparent}.duet-theme-turva .duet-legend-wrapper{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a}.duet-fieldset-label{margin-bottom:12px !important;margin-top:8px}.duet-legend-has-caption .duet-fieldset-label{margin-bottom:6px !important}.duet-legend-has-tooltip .duet-fieldset-label{padding-right:36px}@media (min-width: 48em){.duet-legend-has-tooltip .duet-fieldset-label{margin-bottom:3px !important;padding-right:0}}@media (min-width: 48em){.duet-legend-has-tooltip.duet-legend-has-caption .duet-fieldset-label{margin-bottom:-3px !important}}.duet-fieldset-caption{margin-bottom:12px !important}.duet-fieldset-help{display:block;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.875rem;font-weight:400;line-height:1.25;color:#de2362;border-radius:4px}.duet-fieldset-help span{display:block;margin-top:12px}.duet-theme-turva .duet-fieldset-help{color:#e02a0d}::slotted(duet-tooltip){position:absolute;top:4px;right:0}@media (min-width: 48em){::slotted(duet-tooltip){position:relative;right:auto}}.duet-legend-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}";
+
+const DuetFieldset = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.errorId = createID("DuetError");
+    this.labelId = createID("DuetLabel");
+    this.hasTooltip = false;
+    /**
+     * Theme of the fieldset.
+     */
+    this.theme = "";
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * Visually hide the label, but still show it to screen readers.
+     */
+    this.labelHidden = false;
+    this.checkHasTooltip = () => {
+      this.hasTooltip = !!this.element.querySelector("[slot='tooltip']");
+    };
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    this.checkHasTooltip();
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { "aria-labelledby": `${this.labelId} ${this.errorId}`, class: {
+        "duet-fieldset": true,
+        "duet-theme-turva": this.theme === "turva",
+      } }, h("legend", { id: this.labelId }, h("span", null, this.label), this.caption && h("span", null, this.caption)), h("div", { class: {
+        "duet-legend-wrapper": true,
+        "duet-legend-has-caption": !!this.caption,
+        "duet-legend-has-tooltip": this.hasTooltip,
+        "duet-legend-hidden": this.labelHidden,
+      } }, h("div", { class: "duet-fieldset-label" }, h("span", { "aria-hidden": "true" }, this.label), h("slot", { onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { margin: "none" }, this.caption)))), h("slot", null), h("span", { class: "duet-fieldset-help", id: this.errorId, "aria-live": "assertive", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error)))));
+  }
+  get element() { return this; }
+  static get style() { return duetFieldsetCss; }
+}, [1, "duet-fieldset", {
+    "theme": [1025],
+    "margin": [1],
+    "caption": [1],
+    "label": [1],
+    "error": [1],
+    "labelHidden": [4, "label-hidden"],
+    "hasTooltip": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-fieldset", "duet-caption"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-fieldset":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetFieldset);
+      }
+      break;
+    case "duet-caption":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { DuetFieldset as D, defineCustomElement as d };