@sbb-esta/lyne-elements 2.5.1 → 2.7.0

package/development/visual-checkbox/visual-checkbox.js

@@ -0,0 +1,221 @@
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+import { __esDecorate, __runInitializers } from "tslib";
+import { css, LitElement, nothing, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { forceType } from "../core/decorators.js";
+import { isLean } from "../core/dom.js";
+import { SbbDisabledMixin, SbbNegativeMixin } from "../core/mixins.js";
+const style = css`*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+:host {
+  display: block;
+  --sbb-visual-checkbox-dimension: var(--sbb-size-icon-ui-small);
+  --sbb-visual-checkbox-background-color: var(--sbb-color-white);
+  --sbb-visual-checkbox-border-color: var(--sbb-color-smoke);
+  --sbb-visual-checkbox-border-style: solid;
+  --sbb-visual-checkbox-border-width: var(--sbb-border-width-1x);
+  --sbb-visual-checkbox-selection-color: var(--sbb-color-red);
+  --sbb-visual-checkbox-cursor: pointer;
+}
+@media (forced-colors: active) {
+  :host {
+    --sbb-visual-checkbox-selection-color: Canvas;
+    --sbb-visual-checkbox-border-width: 0;
+  }
+}
+
+:host([size=xs]) {
+  --sbb-visual-checkbox-dimension: 1.25rem;
+}
+
+:host([negative]) {
+  --sbb-visual-checkbox-background-color: var(--sbb-color-midnight);
+  --sbb-visual-checkbox-border-color: var(--sbb-color-smoke);
+  --sbb-visual-checkbox-selection-color: var(--sbb-color-red);
+}
+@media (forced-colors: active) {
+  :host([negative]) {
+    --sbb-visual-checkbox-selection-color: Canvas;
+  }
+}
+
+:host([disabled]) {
+  --sbb-visual-checkbox-background-color: var(--sbb-color-milk);
+  --sbb-visual-checkbox-border-color: var(--sbb-color-smoke);
+  --sbb-visual-checkbox-border-style: dashed;
+  --sbb-visual-checkbox-selection-color: var(--sbb-color-charcoal);
+  --sbb-visual-checkbox-cursor: default;
+}
+@media (forced-colors: active) {
+  :host([disabled]) {
+    --sbb-visual-checkbox-selection-color: Canvas;
+  }
+}
+
+:host([disabled][negative]) {
+  --sbb-visual-checkbox-background-color: var(--sbb-color-charcoal);
+  --sbb-visual-checkbox-border-color: var(--sbb-color-smoke);
+  --sbb-visual-checkbox-selection-color: var(--sbb-color-white);
+}
+@media (forced-colors: active) {
+  :host([disabled][negative]) {
+    --sbb-visual-checkbox-selection-color: Canvas;
+  }
+}
+
+@media (forced-colors: active) {
+  :host([indeterminate]) {
+    --sbb-visual-checkbox-selection-color: ButtonBorder;
+  }
+}
+
+@media (forced-colors: active) {
+  :host([indeterminate][disabled]) {
+    --sbb-visual-checkbox-selection-color: GrayText;
+  }
+}
+
+.sbb-visual-checkbox {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sbb-visual-checkbox-dimension);
+  height: var(--sbb-visual-checkbox-dimension);
+  border-radius: var(--sbb-border-radius-2x);
+  border: var(--sbb-visual-checkbox-border-width) var(--sbb-visual-checkbox-border-style) var(--sbb-visual-checkbox-border-color);
+  background-color: var(--sbb-visual-checkbox-background-color);
+  cursor: var(--sbb-visual-checkbox-cursor);
+}
+@media (forced-colors: active) {
+  .sbb-visual-checkbox {
+    outline: var(--sbb-border-width-2x) solid ButtonBorder;
+    outline-offset: calc(-1 * var(--sbb-border-width-2x));
+  }
+  :host([checked]:not([indeterminate])) .sbb-visual-checkbox {
+    background-color: HighLight;
+    outline: none;
+  }
+  :host([disabled]) .sbb-visual-checkbox {
+    outline-color: GrayText;
+  }
+  :host([checked][disabled]:not([indeterminate])) .sbb-visual-checkbox {
+    background-color: GrayText;
+  }
+}
+
+.sbb-visual-checkbox__icon {
+  display: inline-flex;
+  width: var(--sbb-visual-checkbox-dimension);
+  height: var(--sbb-visual-checkbox-dimension);
+}
+.sbb-visual-checkbox__icon svg {
+  margin: auto;
+}
+.sbb-visual-checkbox__icon path {
+  stroke: var(--sbb-visual-checkbox-selection-color);
+}`;
+let SbbVisualCheckboxElement = (() => {
+  var _checked_accessor_storage, _indeterminate_accessor_storage, _size_accessor_storage, _a;
+  let _classDecorators = [customElement("sbb-visual-checkbox")];
+  let _classDescriptor;
+  let _classExtraInitializers = [];
+  let _classThis;
+  let _classSuper = SbbDisabledMixin(SbbNegativeMixin(LitElement));
+  let _checked_decorators;
+  let _checked_initializers = [];
+  let _checked_extraInitializers = [];
+  let _indeterminate_decorators;
+  let _indeterminate_initializers = [];
+  let _indeterminate_extraInitializers = [];
+  let _size_decorators;
+  let _size_initializers = [];
+  let _size_extraInitializers = [];
+  _a = class extends _classSuper {
+    constructor() {
+      super(...arguments);
+      __privateAdd(this, _checked_accessor_storage, __runInitializers(this, _checked_initializers, false));
+      __privateAdd(this, _indeterminate_accessor_storage, (__runInitializers(this, _checked_extraInitializers), __runInitializers(this, _indeterminate_initializers, false)));
+      __privateAdd(this, _size_accessor_storage, (__runInitializers(this, _indeterminate_extraInitializers), __runInitializers(this, _size_initializers, isLean() ? "xs" : "m")));
+      __runInitializers(this, _size_extraInitializers);
+    }
+    /** Checked state. */
+    get checked() {
+      return __privateGet(this, _checked_accessor_storage);
+    }
+    set checked(value) {
+      __privateSet(this, _checked_accessor_storage, value);
+    }
+    /** Indeterminate state. */
+    get indeterminate() {
+      return __privateGet(this, _indeterminate_accessor_storage);
+    }
+    set indeterminate(value) {
+      __privateSet(this, _indeterminate_accessor_storage, value);
+    }
+    /**
+     * Size of the checkbox, either xs, s or m.
+     * @default 'm' / 'xs' (lean)
+     */
+    get size() {
+      return __privateGet(this, _size_accessor_storage);
+    }
+    set size(value) {
+      __privateSet(this, _size_accessor_storage, value);
+    }
+    render() {
+      return html`
+      <span class="sbb-visual-checkbox">
+        <span class="sbb-visual-checkbox__icon">
+          ${this.checked || this.indeterminate ? html`<svg
+                width=${this.size === "xs" ? "20" : "24"}
+                height=${this.size === "xs" ? "20" : "24"}
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d=${this.indeterminate ? "M9 12H15" : "M8 12.3304L10.4615 15L16 9"}
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>` : nothing}
+        </span>
+      </span>
+    `;
+    }
+  }, _checked_accessor_storage = new WeakMap(), _indeterminate_accessor_storage = new WeakMap(), _size_accessor_storage = new WeakMap(), _classThis = _a, (() => {
+    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+    _checked_decorators = [forceType(), property({ reflect: true, type: Boolean })];
+    _indeterminate_decorators = [forceType(), property({ reflect: true, type: Boolean })];
+    _size_decorators = [property({ reflect: true })];
+    __esDecorate(_a, null, _checked_decorators, { kind: "accessor", name: "checked", static: false, private: false, access: { has: (obj) => "checked" in obj, get: (obj) => obj.checked, set: (obj, value) => {
+      obj.checked = value;
+    } }, metadata: _metadata }, _checked_initializers, _checked_extraInitializers);
+    __esDecorate(_a, null, _indeterminate_decorators, { kind: "accessor", name: "indeterminate", static: false, private: false, access: { has: (obj) => "indeterminate" in obj, get: (obj) => obj.indeterminate, set: (obj, value) => {
+      obj.indeterminate = value;
+    } }, metadata: _metadata }, _indeterminate_initializers, _indeterminate_extraInitializers);
+    __esDecorate(_a, null, _size_decorators, { kind: "accessor", name: "size", static: false, private: false, access: { has: (obj) => "size" in obj, get: (obj) => obj.size, set: (obj, value) => {
+      obj.size = value;
+    } }, metadata: _metadata }, _size_initializers, _size_extraInitializers);
+    __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+    _classThis = _classDescriptor.value;
+    if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+  })(), _a.styles = style, __runInitializers(_classThis, _classExtraInitializers), _a;
+  return _classThis;
+})();
+export {
+  SbbVisualCheckboxElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmlzdWFsLWNoZWNrYm94LmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvZWxlbWVudHMvdmlzdWFsLWNoZWNrYm94L3Zpc3VhbC1jaGVja2JveC50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IENTU1Jlc3VsdEdyb3VwLCBUZW1wbGF0ZVJlc3VsdCB9IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBodG1sLCBMaXRFbGVtZW50LCBub3RoaW5nIH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGN1c3RvbUVsZW1lbnQsIHByb3BlcnR5IH0gZnJvbSAnbGl0L2RlY29yYXRvcnMuanMnO1xuXG5pbXBvcnQgdHlwZSB7IFNiYkNoZWNrYm94U2l6ZSB9IGZyb20gJy4uL2NoZWNrYm94L2NvbW1vbi5qcyc7XG5pbXBvcnQgeyBmb3JjZVR5cGUgfSBmcm9tICcuLi9jb3JlL2RlY29yYXRvcnMuanMnO1xuaW1wb3J0IHsgaXNMZWFuIH0gZnJvbSAnLi4vY29yZS9kb20uanMnO1xuaW1wb3J0IHsgU2JiRGlzYWJsZWRNaXhpbiwgU2JiTmVnYXRpdmVNaXhpbiB9IGZyb20gJy4uL2NvcmUvbWl4aW5zLmpzJztcblxuaW1wb3J0IHN0eWxlIGZyb20gJy4vdmlzdWFsLWNoZWNrYm94LnNjc3M/bGl0JmlubGluZSc7XG5cbi8qKlxuICogSXQgdmlzdWFsbHkgZGlzcGxheXMgYSBub24taW50ZXJhY3RpdmUgY2hlY2tib3guXG4gKi9cbmV4cG9ydFxuQGN1c3RvbUVsZW1lbnQoJ3NiYi12aXN1YWwtY2hlY2tib3gnKVxuY2xhc3MgU2JiVmlzdWFsQ2hlY2tib3hFbGVtZW50IGV4dGVuZHMgU2JiRGlzYWJsZWRNaXhpbihTYmJOZWdhdGl2ZU1peGluKExpdEVsZW1lbnQpKSB7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzOiBDU1NSZXN1bHRHcm91cCA9IHN0eWxlO1xuXG4gIC8qKiBDaGVja2VkIHN0YXRlLiAqL1xuICBAZm9yY2VUeXBlKClcbiAgQHByb3BlcnR5KHsgcmVmbGVjdDogdHJ1ZSwgdHlwZTogQm9vbGVhbiB9KVxuICBwdWJsaWMgYWNjZXNzb3IgY2hlY2tlZDogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIC8qKiBJbmRldGVybWluYXRlIHN0YXRlLiAqL1xuICBAZm9yY2VUeXBlKClcbiAgQHByb3BlcnR5KHsgcmVmbGVjdDogdHJ1ZSwgdHlwZTogQm9vbGVhbiB9KVxuICBwdWJsaWMgYWNjZXNzb3IgaW5kZXRlcm1pbmF0ZTogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBTaXplIG9mIHRoZSBjaGVja2JveCwgZWl0aGVyIHhzLCBzIG9yIG0uXG4gICAqIEBkZWZhdWx0ICdtJyAvICd4cycgKGxlYW4pXG4gICAqL1xuICBAcHJvcGVydHkoeyByZWZsZWN0OiB0cnVlIH0pIHB1YmxpYyBhY2Nlc3NvciBzaXplOiBTYmJDaGVja2JveFNpemUgPSBpc0xlYW4oKSA/ICd4cycgOiAnbSc7XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIHJlbmRlcigpOiBUZW1wbGF0ZVJlc3VsdCB7XG4gICAgcmV0dXJuIGh0bWxgXG4gICAgICA8c3BhbiBjbGFzcz1cInNiYi12aXN1YWwtY2hlY2tib3hcIj5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJzYmItdmlzdWFsLWNoZWNrYm94X19pY29uXCI+XG4gICAgICAgICAgJHt0aGlzLmNoZWNrZWQgfHwgdGhpcy5pbmRldGVybWluYXRlXG4gICAgICAgICAgICA/IGh0bWxgPHN2Z1xuICAgICAgICAgICAgICAgIHdpZHRoPSR7dGhpcy5zaXplID09PSAneHMnID8gJzIwJyA6ICcyNCd9XG4gICAgICAgICAgICAgICAgaGVpZ2h0PSR7dGhpcy5zaXplID09PSAneHMnID8gJzIwJyA6ICcyNCd9XG4gICAgICAgICAgICAgICAgdmlld0JveD1cIjAgMCAyNCAyNFwiXG4gICAgICAgICAgICAgICAgZmlsbD1cIm5vbmVcIlxuICAgICAgICAgICAgICAgIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIlxuICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgPHBhdGhcbiAgICAgICAgICAgICAgICAgIGQ9JHt0aGlzLmluZGV0ZXJtaW5hdGUgPyAnTTkgMTJIMTUnIDogJ004IDEyLjMzMDRMMTAuNDYxNSAxNUwxNiA5J31cbiAgICAgICAgICAgICAgICAgIHN0cm9rZS13aWR0aD1cIjJcIlxuICAgICAgICAgICAgICAgICAgc3Ryb2tlLWxpbmVjYXA9XCJyb3VuZFwiXG4gICAgICAgICAgICAgICAgICBzdHJva2UtbGluZWpvaW49XCJyb3VuZFwiXG4gICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICAgPC9zdmc+YFxuICAgICAgICAgICAgOiBub3RoaW5nfVxuICAgICAgICA8L3NwYW4+XG4gICAgICA8L3NwYW4+XG4gICAgYDtcbiAgfVxufVxuXG5kZWNsYXJlIGdsb2JhbCB7XG4gIGludGVyZmFjZSBIVE1MRWxlbWVudFRhZ05hbWVNYXAge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbmFtaW5nLWNvbnZlbnRpb25cbiAgICAnc2JiLXZpc3VhbC1jaGVja2JveCc6IFNiYlZpc3VhbENoZWNrYm94RWxlbWVudDtcbiAgfVxufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7SUFnQk0sNEJBQXdCLE1BQUE7OzBCQUQ3QixjQUFjLHFCQUFxQixDQUFDOzs7O0FBQ0UsTUFBQSxjQUFBLGlCQUFpQixpQkFBaUIsVUFBVSxDQUFDOzs7Ozs7Ozs7O0FBQXJELEVBQUEsbUJBQVEsWUFBOEM7QUFBQTs7QUFNbkYsb0RBQUEsa0JBQUEsTUFBQSx1QkFBbUMsS0FBSztBQUt4QywyREFBQSxrQkFBQSxNQUFB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

package/development/visual-checkbox.d.ts

@@ -1,2 +1,5 @@
+/**
+ * @entrypoint
+ */
 export * from './visual-checkbox/visual-checkbox.js';
 //# sourceMappingURL=visual-checkbox.d.ts.map

package/development/visual-checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"visual-checkbox.d.ts","sourceRoot":"","sources":["../../../src/elements/visual-checkbox.ts"],"names":[],"mappings":"AAAA,cAAc,sCAAsC,CAAC"}
+{"version":3,"file":"visual-checkbox.d.ts","sourceRoot":"","sources":["../../../src/elements/visual-checkbox.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,sCAAsC,CAAC"}

package/development/visual-checkbox.js

@@ -1,221 +1,5 @@
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-import { __esDecorate, __runInitializers } from "tslib";
-import { css, LitElement, nothing, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { forceType } from "./core/decorators.js";
-import { isLean } from "./core/dom.js";
-import { SbbDisabledMixin, SbbNegativeMixin } from "./core/mixins.js";
-const style = css`*,
-::before,
-::after {
-  box-sizing: border-box;
-}
-
-:host {
-  display: block;
-  --sbb-visual-checkbox-dimension: var(--sbb-size-icon-ui-small);
-  --sbb-visual-checkbox-background-color: var(--sbb-color-white);
-  --sbb-visual-checkbox-border-color: var(--sbb-color-smoke);
-  --sbb-visual-checkbox-border-style: solid;
-  --sbb-visual-checkbox-border-width: var(--sbb-border-width-1x);
-  --sbb-visual-checkbox-selection-color: var(--sbb-color-red);
-  --sbb-visual-checkbox-cursor: pointer;
-}
-@media (forced-colors: active) {
-  :host {
-    --sbb-visual-checkbox-selection-color: Canvas;
-    --sbb-visual-checkbox-border-width: 0;
-  }
-}
-
-:host([size=xs]) {
-  --sbb-visual-checkbox-dimension: 1.25rem;
-}
-
-:host([negative]) {
-  --sbb-visual-checkbox-background-color: var(--sbb-color-midnight);
-  --sbb-visual-checkbox-border-color: var(--sbb-color-smoke);
-  --sbb-visual-checkbox-selection-color: var(--sbb-color-red);
-}
-@media (forced-colors: active) {
-  :host([negative]) {
-    --sbb-visual-checkbox-selection-color: Canvas;
-  }
-}
-
-:host([disabled]) {
-  --sbb-visual-checkbox-background-color: var(--sbb-color-milk);
-  --sbb-visual-checkbox-border-color: var(--sbb-color-smoke);
-  --sbb-visual-checkbox-border-style: dashed;
-  --sbb-visual-checkbox-selection-color: var(--sbb-color-charcoal);
-  --sbb-visual-checkbox-cursor: default;
-}
-@media (forced-colors: active) {
-  :host([disabled]) {
-    --sbb-visual-checkbox-selection-color: Canvas;
-  }
-}
-
-:host([disabled][negative]) {
-  --sbb-visual-checkbox-background-color: var(--sbb-color-charcoal);
-  --sbb-visual-checkbox-border-color: var(--sbb-color-smoke);
-  --sbb-visual-checkbox-selection-color: var(--sbb-color-white);
-}
-@media (forced-colors: active) {
-  :host([disabled][negative]) {
-    --sbb-visual-checkbox-selection-color: Canvas;
-  }
-}
-
-@media (forced-colors: active) {
-  :host([indeterminate]) {
-    --sbb-visual-checkbox-selection-color: ButtonBorder;
-  }
-}
-
-@media (forced-colors: active) {
-  :host([indeterminate][disabled]) {
-    --sbb-visual-checkbox-selection-color: GrayText;
-  }
-}
-
-.sbb-visual-checkbox {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--sbb-visual-checkbox-dimension);
-  height: var(--sbb-visual-checkbox-dimension);
-  border-radius: var(--sbb-border-radius-2x);
-  border: var(--sbb-visual-checkbox-border-width) var(--sbb-visual-checkbox-border-style) var(--sbb-visual-checkbox-border-color);
-  background-color: var(--sbb-visual-checkbox-background-color);
-  cursor: var(--sbb-visual-checkbox-cursor);
-}
-@media (forced-colors: active) {
-  .sbb-visual-checkbox {
-    outline: var(--sbb-border-width-2x) solid ButtonBorder;
-    outline-offset: calc(-1 * var(--sbb-border-width-2x));
-  }
-  :host([checked]:not([indeterminate])) .sbb-visual-checkbox {
-    background-color: HighLight;
-    outline: none;
-  }
-  :host([disabled]) .sbb-visual-checkbox {
-    outline-color: GrayText;
-  }
-  :host([checked][disabled]:not([indeterminate])) .sbb-visual-checkbox {
-    background-color: GrayText;
-  }
-}
-
-.sbb-visual-checkbox__icon {
-  display: inline-flex;
-  width: var(--sbb-visual-checkbox-dimension);
-  height: var(--sbb-visual-checkbox-dimension);
-}
-.sbb-visual-checkbox__icon svg {
-  margin: auto;
-}
-.sbb-visual-checkbox__icon path {
-  stroke: var(--sbb-visual-checkbox-selection-color);
-}`;
-let SbbVisualCheckboxElement = (() => {
-  var _checked_accessor_storage, _indeterminate_accessor_storage, _size_accessor_storage, _a;
-  let _classDecorators = [customElement("sbb-visual-checkbox")];
-  let _classDescriptor;
-  let _classExtraInitializers = [];
-  let _classThis;
-  let _classSuper = SbbDisabledMixin(SbbNegativeMixin(LitElement));
-  let _checked_decorators;
-  let _checked_initializers = [];
-  let _checked_extraInitializers = [];
-  let _indeterminate_decorators;
-  let _indeterminate_initializers = [];
-  let _indeterminate_extraInitializers = [];
-  let _size_decorators;
-  let _size_initializers = [];
-  let _size_extraInitializers = [];
-  _a = class extends _classSuper {
-    constructor() {
-      super(...arguments);
-      __privateAdd(this, _checked_accessor_storage, __runInitializers(this, _checked_initializers, false));
-      __privateAdd(this, _indeterminate_accessor_storage, (__runInitializers(this, _checked_extraInitializers), __runInitializers(this, _indeterminate_initializers, false)));
-      __privateAdd(this, _size_accessor_storage, (__runInitializers(this, _indeterminate_extraInitializers), __runInitializers(this, _size_initializers, isLean() ? "xs" : "m")));
-      __runInitializers(this, _size_extraInitializers);
-    }
-    /** Checked state. */
-    get checked() {
-      return __privateGet(this, _checked_accessor_storage);
-    }
-    set checked(value) {
-      __privateSet(this, _checked_accessor_storage, value);
-    }
-    /** Indeterminate state. */
-    get indeterminate() {
-      return __privateGet(this, _indeterminate_accessor_storage);
-    }
-    set indeterminate(value) {
-      __privateSet(this, _indeterminate_accessor_storage, value);
-    }
-    /**
-     * Size of the checkbox, either xs, s or m.
-     * @default 'm' / 'xs' (lean)
-     */
-    get size() {
-      return __privateGet(this, _size_accessor_storage);
-    }
-    set size(value) {
-      __privateSet(this, _size_accessor_storage, value);
-    }
-    render() {
-      return html`
-      <span class="sbb-visual-checkbox">
-        <span class="sbb-visual-checkbox__icon">
-          ${this.checked || this.indeterminate ? html`<svg
-                width=${this.size === "xs" ? "20" : "24"}
-                height=${this.size === "xs" ? "20" : "24"}
-                viewBox="0 0 24 24"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d=${this.indeterminate ? "M9 12H15" : "M8 12.3304L10.4615 15L16 9"}
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </svg>` : nothing}
-        </span>
-      </span>
-    `;
-    }
-  }, _checked_accessor_storage = new WeakMap(), _indeterminate_accessor_storage = new WeakMap(), _size_accessor_storage = new WeakMap(), _classThis = _a, (() => {
-    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-    _checked_decorators = [forceType(), property({ reflect: true, type: Boolean })];
-    _indeterminate_decorators = [forceType(), property({ reflect: true, type: Boolean })];
-    _size_decorators = [property({ reflect: true })];
-    __esDecorate(_a, null, _checked_decorators, { kind: "accessor", name: "checked", static: false, private: false, access: { has: (obj) => "checked" in obj, get: (obj) => obj.checked, set: (obj, value) => {
-      obj.checked = value;
-    } }, metadata: _metadata }, _checked_initializers, _checked_extraInitializers);
-    __esDecorate(_a, null, _indeterminate_decorators, { kind: "accessor", name: "indeterminate", static: false, private: false, access: { has: (obj) => "indeterminate" in obj, get: (obj) => obj.indeterminate, set: (obj, value) => {
-      obj.indeterminate = value;
-    } }, metadata: _metadata }, _indeterminate_initializers, _indeterminate_extraInitializers);
-    __esDecorate(_a, null, _size_decorators, { kind: "accessor", name: "size", static: false, private: false, access: { has: (obj) => "size" in obj, get: (obj) => obj.size, set: (obj, value) => {
-      obj.size = value;
-    } }, metadata: _metadata }, _size_initializers, _size_extraInitializers);
-    __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-    _classThis = _classDescriptor.value;
-    if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-  })(), _a.styles = style, __runInitializers(_classThis, _classExtraInitializers), _a;
-  return _classThis;
-})();
+import { SbbVisualCheckboxElement } from "./visual-checkbox/visual-checkbox.js";
 export {
   SbbVisualCheckboxElement
 };
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmlzdWFsLWNoZWNrYm94LmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvZWxlbWVudHMvdmlzdWFsLWNoZWNrYm94L3Zpc3VhbC1jaGVja2JveC50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IENTU1Jlc3VsdEdyb3VwLCBUZW1wbGF0ZVJlc3VsdCB9IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBodG1sLCBMaXRFbGVtZW50LCBub3RoaW5nIH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGN1c3RvbUVsZW1lbnQsIHByb3BlcnR5IH0gZnJvbSAnbGl0L2RlY29yYXRvcnMuanMnO1xuXG5pbXBvcnQgdHlwZSB7IFNiYkNoZWNrYm94U2l6ZSB9IGZyb20gJy4uL2NoZWNrYm94L2NvbW1vbi5qcyc7XG5pbXBvcnQgeyBmb3JjZVR5cGUgfSBmcm9tICcuLi9jb3JlL2RlY29yYXRvcnMuanMnO1xuaW1wb3J0IHsgaXNMZWFuIH0gZnJvbSAnLi4vY29yZS9kb20uanMnO1xuaW1wb3J0IHsgU2JiRGlzYWJsZWRNaXhpbiwgU2JiTmVnYXRpdmVNaXhpbiB9IGZyb20gJy4uL2NvcmUvbWl4aW5zLmpzJztcblxuaW1wb3J0IHN0eWxlIGZyb20gJy4vdmlzdWFsLWNoZWNrYm94LnNjc3M/bGl0JmlubGluZSc7XG5cbi8qKlxuICogSXQgdmlzdWFsbHkgZGlzcGxheXMgYSBub24taW50ZXJhY3RpdmUgY2hlY2tib3guXG4gKi9cbmV4cG9ydFxuQGN1c3RvbUVsZW1lbnQoJ3NiYi12aXN1YWwtY2hlY2tib3gnKVxuY2xhc3MgU2JiVmlzdWFsQ2hlY2tib3hFbGVtZW50IGV4dGVuZHMgU2JiRGlzYWJsZWRNaXhpbihTYmJOZWdhdGl2ZU1peGluKExpdEVsZW1lbnQpKSB7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzOiBDU1NSZXN1bHRHcm91cCA9IHN0eWxlO1xuXG4gIC8qKiBDaGVja2VkIHN0YXRlLiAqL1xuICBAZm9yY2VUeXBlKClcbiAgQHByb3BlcnR5KHsgcmVmbGVjdDogdHJ1ZSwgdHlwZTogQm9vbGVhbiB9KVxuICBwdWJsaWMgYWNjZXNzb3IgY2hlY2tlZDogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIC8qKiBJbmRldGVybWluYXRlIHN0YXRlLiAqL1xuICBAZm9yY2VUeXBlKClcbiAgQHByb3BlcnR5KHsgcmVmbGVjdDogdHJ1ZSwgdHlwZTogQm9vbGVhbiB9KVxuICBwdWJsaWMgYWNjZXNzb3IgaW5kZXRlcm1pbmF0ZTogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBTaXplIG9mIHRoZSBjaGVja2JveCwgZWl0aGVyIHhzLCBzIG9yIG0uXG4gICAqIEBkZWZhdWx0ICdtJyAvICd4cycgKGxlYW4pXG4gICAqL1xuICBAcHJvcGVydHkoeyByZWZsZWN0OiB0cnVlIH0pIHB1YmxpYyBhY2Nlc3NvciBzaXplOiBTYmJDaGVja2JveFNpemUgPSBpc0xlYW4oKSA/ICd4cycgOiAnbSc7XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIHJlbmRlcigpOiBUZW1wbGF0ZVJlc3VsdCB7XG4gICAgcmV0dXJuIGh0bWxgXG4gICAgICA8c3BhbiBjbGFzcz1cInNiYi12aXN1YWwtY2hlY2tib3hcIj5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJzYmItdmlzdWFsLWNoZWNrYm94X19pY29uXCI+XG4gICAgICAgICAgJHt0aGlzLmNoZWNrZWQgfHwgdGhpcy5pbmRldGVybWluYXRlXG4gICAgICAgICAgICA/IGh0bWxgPHN2Z1xuICAgICAgICAgICAgICAgIHdpZHRoPSR7dGhpcy5zaXplID09PSAneHMnID8gJzIwJyA6ICcyNCd9XG4gICAgICAgICAgICAgICAgaGVpZ2h0PSR7dGhpcy5zaXplID09PSAneHMnID8gJzIwJyA6ICcyNCd9XG4gICAgICAgICAgICAgICAgdmlld0JveD1cIjAgMCAyNCAyNFwiXG4gICAgICAgICAgICAgICAgZmlsbD1cIm5vbmVcIlxuICAgICAgICAgICAgICAgIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIlxuICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgPHBhdGhcbiAgICAgICAgICAgICAgICAgIGQ9JHt0aGlzLmluZGV0ZXJtaW5hdGUgPyAnTTkgMTJIMTUnIDogJ004IDEyLjMzMDRMMTAuNDYxNSAxNUwxNiA5J31cbiAgICAgICAgICAgICAgICAgIHN0cm9rZS13aWR0aD1cIjJcIlxuICAgICAgICAgICAgICAgICAgc3Ryb2tlLWxpbmVjYXA9XCJyb3VuZFwiXG4gICAgICAgICAgICAgICAgICBzdHJva2UtbGluZWpvaW49XCJyb3VuZFwiXG4gICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICAgPC9zdmc+YFxuICAgICAgICAgICAgOiBub3RoaW5nfVxuICAgICAgICA8L3NwYW4+XG4gICAgICA8L3NwYW4+XG4gICAgYDtcbiAgfVxufVxuXG5kZWNsYXJlIGdsb2JhbCB7XG4gIGludGVyZmFjZSBIVE1MRWxlbWVudFRhZ05hbWVNYXAge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbmFtaW5nLWNvbnZlbnRpb25cbiAgICAnc2JiLXZpc3VhbC1jaGVja2JveCc6IFNiYlZpc3VhbENoZWNrYm94RWxlbWVudDtcbiAgfVxufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7SUFnQk0sNEJBQXdCLE1BQUE7OzBCQUQ3QixjQUFjLHFCQUFxQixDQUFDOzs7O0FBQ0UsTUFBQSxjQUFBLGlCQUFpQixpQkFBaUIsVUFBVSxDQUFDOzs7Ozs7Ozs7O0FBQXJELEVBQUEsbUJBQVEsWUFBOEM7QUFBQTs7QUFNbkYsb0RBQUEsa0JBQUEsTUFBQSx1QkFBbUMsS0FBSztBQUt4QywyREFBQSxrQkFBQSxNQUFBLDBC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
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmlzdWFsLWNoZWNrYm94LmpzIiwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjsifQ==

package/dialog/dialog/dialog.d.ts

@@ -38,7 +38,6 @@ export declare class SbbDialogElement extends SbbOverlayBaseElement {
     protected willUpdate(changedProperties: PropertyValues<this>): void;
     protected attachOpenOverlayEvents(): void;
     protected onOverlayAnimationEnd(event: AnimationEvent): void;
-    protected setOverlayFocus(): void;
     private _syncNegative;
     private _onContentScroll;
     private _pointerDownListener;

package/dialog/dialog/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../../src/elements/dialog/dialog/dialog.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM1E,OAAO,EAAe,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAMtE,OAAO,6BAA6B,CAAC;AAIrC;;;;;;;;;;;GAWG;AACH,qBAEM,gBAAiB,SAAQ,qBAAqB;IAClD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,6BAA6B;IAC7B,SAA4D,cAAc,EAAE,OAAO,GAAG,MAAM,CAClF;IAEV,wBAAwB;IACxB,SAAoE,QAAQ,EACxE,QAAQ,GACR,aAAa,CAAY;IAM7B,OAAO,CAAC,4BAA4B,CAIjC;IAEH,OAAO,CAAC,mBAAmB,CAAsC;IACjE,OAAO,CAAC,kBAAkB,CAAC,CAAS;IACpC,OAAO,CAAC,qBAAqB,CAA4B;IACzD,OAAO,CAAC,qBAAqB,CAAwC;IACrE,OAAO,CAAC,2BAA2B,CAAkB;IACrD,OAAO,CAAC,UAAU,CAAkB;IACpC,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,SAAS,CAA4B;IAC7C,SAAS,CAAC,cAAc,EAAE,MAAM,CAAsB;;IAStD,2BAA2B;IACpB,IAAI,IAAI,IAAI;IAmCnB,SAAS,CAAC,uBAAuB,IAAI,OAAO;IAI5C,SAAS,CAAC,aAAa,IAAI,IAAI;IA2B/B,OAAO,CAAC,cAAc;cAgBH,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAO3D,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQzD,uBAAuB,IAAI,IAAI;IAgBlD,SAAS,CAAC,qBAAqB,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;IAS5D,SAAS,CAAC,eAAe,IAAI,IAAI;IAQjC,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,gBAAgB;IAqCxB,OAAO,CAAC,oBAAoB,CAS1B;IAGF,OAAO,CAAC,qBAAqB,CAc3B;IAEF,OAAO,CAAC,sBAAsB;IAK9B,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,2BAA2B;IAYnC,OAAO,CAAC,0BAA0B;cAMf,MAAM,IAAI,cAAc;CAe5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../../src/elements/dialog/dialog/dialog.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1E,OAAO,EAAe,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAMtE,OAAO,6BAA6B,CAAC;AAIrC;;;;;;;;;;;GAWG;AACH,qBAEM,gBAAiB,SAAQ,qBAAqB;IAClD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,6BAA6B;IAC7B,SAA4D,cAAc,EAAE,OAAO,GAAG,MAAM,CAClF;IAEV,wBAAwB;IACxB,SAAoE,QAAQ,EACxE,QAAQ,GACR,aAAa,CAAY;IAM7B,OAAO,CAAC,4BAA4B,CAIjC;IAEH,OAAO,CAAC,mBAAmB,CAAsC;IACjE,OAAO,CAAC,kBAAkB,CAAC,CAAS;IACpC,OAAO,CAAC,qBAAqB,CAA4B;IACzD,OAAO,CAAC,qBAAqB,CAAwC;IACrE,OAAO,CAAC,2BAA2B,CAAkB;IACrD,OAAO,CAAC,UAAU,CAAkB;IACpC,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,SAAS,CAA4B;IAC7C,SAAS,CAAC,cAAc,EAAE,MAAM,CAAsB;;IAStD,2BAA2B;IACpB,IAAI,IAAI,IAAI;IAmCnB,SAAS,CAAC,uBAAuB,IAAI,OAAO;IAI5C,SAAS,CAAC,aAAa,IAAI,IAAI;IA0B/B,OAAO,CAAC,cAAc;cAgBH,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAO3D,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQzD,uBAAuB,IAAI,IAAI;IAgBlD,SAAS,CAAC,qBAAqB,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;IAQ5D,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,gBAAgB;IAqCxB,OAAO,CAAC,oBAAoB,CAS1B;IAGF,OAAO,CAAC,qBAAqB,CAc3B;IAEF,OAAO,CAAC,sBAAsB;IAK9B,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,2BAA2B;IAYnC,OAAO,CAAC,0BAA0B;cAMf,MAAM,IAAI,cAAc;CAe5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}

package/dialog/dialog/dialog.js

@@ -0,0 +1,142 @@
+var y = (i) => {
+  throw TypeError(i);
+};
+var x = (i, a, o) => a.has(i) || y("Cannot " + o);
+var g = (i, a, o) => (x(i, a, "read from private field"), o ? o.call(i) : a.get(i)), m = (i, a, o) => a.has(i) ? y("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(i) : a.set(i, o), c = (i, a, o, n) => (x(i, a, "write to private field"), n ? n.call(i, o) : a.set(i, o), o);
+import { __esDecorate as p, __runInitializers as h } from "tslib";
+import { ResizeController as O } from "@lit-labs/observers/resize-controller.js";
+import { customElement as H, property as C } from "lit/decorators.js";
+import { html as T } from "lit/static-html.js";
+import { isZeroAnimationDuration as D, isBreakpoint as S } from "../../core/dom.js";
+import { SbbOverlayBaseElement as z, overlayRefs as A } from "../../overlay.js";
+import { css as I } from "lit";
+import "../../screen-reader-only.js";
+const L = I`*,:before,:after{box-sizing:border-box}:host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-dialog-padding-inline: var(--sbb-spacing-fixed-5x);--sbb-dialog-color: var(--sbb-color-black);--sbb-dialog-background-color: var(--sbb-color-white);--sbb-dialog-width: 100%;--sbb-dialog-height: 100%;--sbb-dialog-max-width: 100%;--sbb-dialog-max-width-default: 55.75rem;--sbb-dialog-max-height: 100%;--sbb-dialog-inset: 0 auto auto 0;--sbb-dialog-border-radius: var(--sbb-border-radius-8x);--sbb-dialog-padding-block: var(--sbb-spacing-responsive-s);--sbb-dialog-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-dialog-animation-easing: ease;--sbb-dialog-pointer-events: none;--sbb-dialog-backdrop-visibility: hidden;--sbb-dialog-backdrop-pointer-events: none;--sbb-dialog-backdrop-color: transparent;--sbb-dialog-content-transition: transform var(--sbb-dialog-animation-duration) var(--sbb-dialog-animation-easing);--sbb-dialog-actions-border: var(--sbb-border-width-1x) solid var(--sbb-color-cloud);display:none;position:fixed;inset:var(--sbb-dialog-inset);z-index:var(--sbb-dialog-z-index, var(--sbb-overlay-default-z-index))}@media (min-width: 22.5rem){:host{--sbb-dialog-padding-inline: var(--sbb-spacing-fixed-6x)}}@media (min-width: 37.5rem){:host{--sbb-dialog-padding-inline: var(--sbb-spacing-fixed-12x)}}@media (min-width: 52.5rem){:host{--sbb-dialog-padding-inline: var(--sbb-spacing-responsive-s);--sbb-dialog-max-width: min( calc(100vw - var(--sbb-spacing-fixed-30x) * 2), var(--sbb-dialog-max-width-default) );--sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-16x))}}:host([data-state]:not([data-state=closed])){display:block}:host(:is([data-state=opening],[data-state=opened])){--sbb-dialog-pointer-events: all;--sbb-dialog-backdrop-color: var(--sbb-color-milk)}@media (min-width: 52.5rem){:host(:is([data-state=opening],[data-state=opened])){--sbb-dialog-backdrop-visibility: visible;--sbb-dialog-backdrop-pointer-events: all}}:host([backdrop=translucent]:is([data-state=opening],[data-state=opened])){--sbb-dialog-backdrop-color: var(--sbb-color-black-alpha-50)}:host([data-hide-header]){--sbb-dialog-header-margin-block-start: calc(var(--sbb-dialog-header-height) * -1)}:host([negative]){--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-dialog-color: var(--sbb-color-white);--sbb-dialog-background-color: var(--sbb-color-midnight);--sbb-dialog-actions-border: none}:host([data-overflows]:not([negative])){--sbb-dialog-actions-border: none}:host(:not([data-state=closed])){--sbb-dialog-inset: 0}.sbb-dialog__container{pointer-events:var(--sbb-dialog-pointer-events);display:flex;align-items:center;position:fixed;inset:var(--sbb-dialog-inset)}.sbb-dialog__container:before{content:"";visibility:var(--sbb-dialog-backdrop-visibility);pointer-events:var(--sbb-dialog-backdrop-pointer-events);position:fixed;inset:var(--sbb-dialog-inset);background-color:var(--sbb-dialog-backdrop-color);transition-duration:var(--sbb-dialog-animation-duration);transition-timing-function:var(--sbb-dialog-animation-easing);transition-property:background-color,visibility}.sbb-dialog{display:none;position:absolute;inset-inline:0;margin:auto;padding:0;border:none;width:var(--sbb-dialog-width);height:var(--sbb-dialog-height);max-width:var(--sbb-dialog-max-width);max-height:var(--sbb-dialog-max-height);overflow:auto;color:var(--sbb-dialog-color);background-color:var(--sbb-dialog-background-color)}:host([data-state]:not([data-state=closed])) .sbb-dialog{display:block;animation-name:open;animation-duration:var(--sbb-dialog-animation-duration);animation-timing-function:ease}:host([data-state][data-state=closing]) .sbb-dialog{pointer-events:none;animation-name:close}@media (forced-colors: active){.sbb-dialog{outline:var(--sbb-border-width-1x) solid CanvasText}}@media (min-width: 52.5rem){.sbb-dialog{border-radius:var(--sbb-dialog-border-radius);overflow:hidden;height:fit-content}}.sbb-dialog__wrapper{display:flex;flex-direction:column;width:var(--sbb-dialog-width);height:var(--sbb-dialog-height);max-width:var(--sbb-dialog-max-width);max-height:var(--sbb-dialog-max-height);outline:none;position:fixed}@media (min-width: 52.5rem){.sbb-dialog__wrapper{position:sticky;inset-block-start:0;height:auto}}@keyframes open{0%{opacity:0;transform:translateY(var(--sbb-spacing-fixed-4x))}to{opacity:1;transform:translateY(0)}}@keyframes close{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(var(--sbb-spacing-fixed-4x))}}`;
+let R = 0, Z = (() => {
+  var d, b, r;
+  let i = [H("sbb-dialog")], a, o = [], n, v = z, u, _ = [], f = [], k, w = [], E = [];
+  return r = class extends v {
+    constructor() {
+      var t, e;
+      super();
+      m(this, d);
+      m(this, b);
+      c(this, d, h(this, _, "close")), c(this, b, (h(this, f), h(this, w, "opaque"))), this._dialogContentResizeObserver = (h(this, E), new O(this, {
+        target: null,
+        skipInitial: !0,
+        callback: () => setTimeout(() => this._onContentResize())
+      })), this._dialogTitleElement = null, this._dialogContentElement = null, this._dialogActionsElement = null, this._isPointerDownEventOnDialog = !1, this._overflows = !1, this._lastScroll = 0, this._dialogId = `sbb-dialog-${R++}`, this.closeAttribute = "sbb-dialog-close", this._pointerDownListener = (s) => {
+        this.backdropAction === "close" && (this._isPointerDownEventOnDialog = s.composedPath().filter((l) => l instanceof window.HTMLElement).some((l) => l.id === this._dialogId));
+      }, this._closeOnBackdropClick = (s) => {
+        this.backdropAction === "close" && !this._isPointerDownEventOnDialog && !s.composedPath().filter((l) => l instanceof window.HTMLElement).some((l) => l.id === this._dialogId) && this.close();
+      }, (t = this.addEventListener) == null || t.call(this, "pointerdown", this._pointerDownListener), (e = this.addEventListener) == null || e.call(this, "pointerup", this._closeOnBackdropClick);
+    }
+    /** Backdrop click action. */
+    get backdropAction() {
+      return g(this, d);
+    }
+    set backdropAction(t) {
+      c(this, d, t);
+    }
+    /** Backdrop density. */
+    get backdrop() {
+      return g(this, b);
+    }
+    set backdrop(t) {
+      c(this, b, t);
+    }
+    /** Opens the component. */
+    open() {
+      var t, e;
+      this.state === "closed" && (this.lastFocusedElement = document.activeElement, this._dialogTitleElement = this.querySelector("sbb-dialog-title"), this._dialogContentElement = (t = this.querySelector("sbb-dialog-content")) == null ? void 0 : t.shadowRoot.firstElementChild, this._dialogActionsElement = this.querySelector("sbb-dialog-actions"), this._syncNegative(), this.willOpen.emit() && ((e = this.showPopover) == null || e.call(this), this.state = "opening", A.push(this), this._dialogContentResizeObserver.observe(this._dialogContentElement), this.scrollHandler.disableScroll(), this.isZeroAnimationDuration() && this._handleOpening()));
+    }
+    isZeroAnimationDuration() {
+      return D(this, "--sbb-dialog-animation-duration");
+    }
+    handleClosing() {
+      var t, e, s, l;
+      this._setHideHeaderDataAttribute(!1), (t = this._dialogContentElement) == null || t.scrollTo(0, 0), this.state = "closed", (e = this.hidePopover) == null || e.call(this), this.inertController.deactivate(), (s = this.lastFocusedElement) == null || s.focus(), (l = this.openOverlayController) == null || l.abort(), this.focusTrapController.enabled = !1, this._dialogContentElement && this._dialogContentResizeObserver.unobserve(this._dialogContentElement), this.removeInstanceFromGlobalCollection(), A.length || this.scrollHandler.enableScroll(), this.sbbEscapableOverlayController.disconnect(), this.didClose.emit({
+        returnValue: this.returnValue,
+        closeTarget: this.overlayCloseElement
+      });
+    }
+    _handleOpening() {
+      this.state = "opened", this.inertController.activate(), this.sbbEscapableOverlayController.connect(), this.attachOpenOverlayEvents(), this.focusTrapController.focusInitialElement(), setTimeout(() => {
+        var t;
+        return this.setAriaLiveRefContent(this.accessibilityLabel || ((t = this._dialogTitleElement) == null ? void 0 : t.innerText.trim()));
+      }), this.focusTrapController.enabled = !0, this.didOpen.emit();
+    }
+    firstUpdated(t) {
+      this._dialogTitleElement = this.querySelector("sbb-dialog-title"), this._syncNegative(), super.firstUpdated(t);
+    }
+    willUpdate(t) {
+      super.willUpdate(t), t.has("negative") && this._syncNegative();
+    }
+    attachOpenOverlayEvents() {
+      var t;
+      super.attachOpenOverlayEvents(), (t = this._dialogContentElement) == null || t.addEventListener("scroll", () => this._onContentScroll(), {
+        passive: !0,
+        signal: this.openOverlayController.signal
+      }), window.addEventListener("resize", () => this._setHideHeaderDataAttribute(!1), {
+        signal: this.openOverlayController.signal
+      });
+    }
+    // Wait for dialog transition to complete.
+    // In rare cases, it can be that the animationEnd event is triggered twice.
+    // To avoid entering a corrupt state, exit when state is not expected.
+    onOverlayAnimationEnd(t) {
+      t.animationName === "open" && this.state === "opening" ? this._handleOpening() : t.animationName === "close" && this.state === "closing" && this.handleClosing();
+    }
+    _syncNegative() {
+      this._dialogTitleElement && (this._dialogTitleElement.negative = this.negative), this._dialogActionsElement && this._dialogActionsElement.toggleAttribute("data-negative", this.negative);
+    }
+    _onContentScroll() {
+      if (!this._dialogContentElement || this.dataset.hideHeader === void 0 && this._dialogContentElement.clientHeight + this._dialogTitleHeight >= this._dialogContentElement.scrollHeight)
+        return;
+      const e = this._dialogContentElement.scrollTop;
+      Math.round(e + this._dialogContentElement.clientHeight) >= this._dialogContentElement.scrollHeight || (e > 0 && this._lastScroll < e ? this._setHideHeaderDataAttribute(!0) : this._setHideHeaderDataAttribute(!1), this._lastScroll = e <= 0 ? 0 : e);
+    }
+    _setDialogHeaderHeight() {
+      var t;
+      this._dialogTitleHeight = (t = this._dialogTitleElement) == null ? void 0 : t.shadowRoot.firstElementChild.clientHeight, this.style.setProperty("--sbb-dialog-header-height", `${this._dialogTitleHeight}px`);
+    }
+    _onContentResize() {
+      var t, e;
+      this._setDialogHeaderHeight(), this._overflows = this._dialogContentElement ? ((t = this._dialogContentElement) == null ? void 0 : t.scrollHeight) > ((e = this._dialogContentElement) == null ? void 0 : e.clientHeight) : !1, this._setOverflowsDataAttribute();
+    }
+    _setHideHeaderDataAttribute(t) {
+      var l;
+      const e = ((l = this._dialogTitleElement) == null ? void 0 : l.hideOnScroll) ?? !1, s = typeof e == "boolean" ? e : S("zero", e, { includeMaxBreakpoint: !0 }) ?? !1;
+      this.toggleAttribute("data-hide-header", s ? t : !1), this._dialogTitleElement && this._dialogTitleElement.toggleAttribute("data-hide-header", s ? t : !1);
+    }
+    _setOverflowsDataAttribute() {
+      var t, e;
+      this.toggleAttribute("data-overflows", this._overflows), (t = this._dialogTitleElement) == null || t.toggleAttribute("data-overflows", this._overflows), (e = this._dialogActionsElement) == null || e.toggleAttribute("data-overflows", this._overflows);
+    }
+    render() {
+      return T`
+      <div class="sbb-dialog__container">
+        <div @animationend=${this.onOverlayAnimationEnd} class="sbb-dialog" id=${this._dialogId}>
+          <div
+            @click=${(t) => this.closeOnSbbOverlayCloseClick(t)}
+            class="sbb-dialog__wrapper"
+          >
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+      <sbb-screen-reader-only aria-live="polite"></sbb-screen-reader-only>
+    `;
+    }
+  }, d = new WeakMap(), b = new WeakMap(), n = r, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
+    u = [C({ attribute: "backdrop-action" })], k = [C({ attribute: "backdrop", reflect: !0 })], p(r, null, u, { kind: "accessor", name: "backdropAction", static: !1, private: !1, access: { has: (e) => "backdropAction" in e, get: (e) => e.backdropAction, set: (e, s) => {
+      e.backdropAction = s;
+    } }, metadata: t }, _, f), p(r, null, k, { kind: "accessor", name: "backdrop", static: !1, private: !1, access: { has: (e) => "backdrop" in e, get: (e) => e.backdrop, set: (e, s) => {
+      e.backdrop = s;
+    } }, metadata: t }, w, E), p(null, a = { value: n }, i, { kind: "class", name: n.name, metadata: t }, null, o), n = a.value, t && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), r.styles = L, h(n, o), n;
+})();
+export {
+  Z as SbbDialogElement
+};