@0001-labs/design-system-1 0.0.0-stage → 0.3.0-alpha.13

package/dist/2-core/ds-cycle.js

@@ -0,0 +1,497 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import { define } from "../0-face/define";
+import { translate, currentLanguage, getAvailableLanguagesSync, getLanguageDisplayName, setLanguage, } from "../0-face/i18n";
+import { currentTheme, setTheme } from "../0-face/theme";
+import { savePreferences } from "../0-face/preferences";
+import "./ds-button";
+import "./ds-icon";
+import "./ds-text";
+import styles from "./styles/ds-cycle.css?inline";
+// Accent color utilities
+const saveAccentColor = (color) => {
+    localStorage.setItem("accentColor", color);
+};
+const getAccentColor = () => {
+    return localStorage.getItem("accentColor") || "--sharp-blue"; // Default color if none set
+};
+const applyAccentColor = () => {
+    const color = getAccentColor();
+    document.documentElement.style.setProperty("--accent-color", `var(${color})`);
+};
+// Notes style medium utilities
+const saveNotesStyleMedium = (style) => {
+    localStorage.setItem("notesStyleMedium", style);
+};
+const getNotesStyleMedium = () => {
+    return localStorage.getItem("notesStyleMedium") || "note"; // Default to note
+};
+// Note behavior utilities
+const savePageStyle = (style) => {
+    localStorage.setItem("pageStyle", style);
+};
+const getPageStyle = () => {
+    return localStorage.getItem("pageStyle") || "note"; // Default to note
+};
+// App width utilities removed
+// Use a regular class with proper TypeScript type declarations and JSDoc comments
+export class Cycle extends LitElement {
+    // Define reactive properties using Lit's property system
+    static get properties() {
+        return {
+            type: { type: String },
+            values: { type: Array },
+            currentValue: { type: String, state: true }, // Make this a private state property
+            translationsReady: { type: Boolean, state: true }, // Track if translations are loaded
+            disabled: { type: Boolean, reflect: true },
+            _fieldsetDisabled: { state: true },
+            variant: { type: String },
+            // The same two words a button takes: `primary` is a chip in the accent,
+            // `secondary` a grey one. Neither given, the type decides (below), and
+            // the choice is written back onto the host so a page sheet can read it.
+            primary: { type: Boolean, reflect: true },
+            secondary: { type: Boolean, reflect: true },
+        };
+    }
+    constructor() {
+        super();
+        if (typeof this.attachInternals === "function")
+            this.attachInternals();
+        this._fieldsetDisabled = false;
+        this.variant = "";
+        // Initialize properties with default values
+        this.type = "";
+        this.values = [];
+        this.currentValue = "";
+        this.translationsReady = false;
+        this.disabled = false;
+        this.primary = false;
+        this.secondary = false;
+        // Bind event handlers to this instance for proper cleanup
+        this.boundHandlers = {
+            translationsLoaded: this.handleTranslationsLoaded.bind(this),
+            languageChanged: this.handleLanguageChanged.bind(this),
+            handleLanguageChanged: this.handleLanguageChanged.bind(this),
+            handleThemeChanged: this.handleThemeChanged.bind(this),
+            handleAccentColorChanged: this.handleAccentColorChanged.bind(this),
+            handleNoteBehaviorChanged: this.handleNoteBehaviorChanged.bind(this),
+        };
+    }
+    formDisabledCallback(disabled) { this._fieldsetDisabled = disabled; }
+    focus(options) { this.shadowRoot?.querySelector("ds-button, button")?.focus(options); }
+    connectedCallback() {
+        super.connectedCallback();
+        // Add event listeners
+        window.addEventListener("translations-loaded", this.boundHandlers.translationsLoaded);
+        window.addEventListener("language-changed", this.boundHandlers.languageChanged);
+        window.addEventListener("theme-changed", this.boundHandlers.handleThemeChanged);
+        window.addEventListener("accent-color-changed", this.boundHandlers.handleAccentColorChanged);
+        window.addEventListener("page-style-changed", this.boundHandlers.handleNoteBehaviorChanged);
+        // Initialize the component
+        this.initializeValues();
+    }
+    async initializeValues() {
+        if (this.type === "language") {
+            // Dynamically get available languages from translation data
+            const availableLanguages = getAvailableLanguagesSync();
+            this.values = availableLanguages;
+            this.currentValue = currentLanguage.value;
+        }
+        else if (this.type === "theme") {
+            // Set up theme cycling
+            this.values = ["light", "dark"];
+            // Set initial value based on current theme
+            const currentThemeValue = currentTheme.get();
+            this.currentValue = currentThemeValue;
+        }
+        else if (this.type === "accent-color") {
+            // Set up accent color cycling
+            this.values = [
+                "--apple-green",
+                "--every-green",
+                "--zenith-blue",
+                "--sharp-blue",
+                "--pink",
+                "--tuned-red",
+                "--orange",
+                "--yellow",
+            ];
+            // Set initial value based on current accent color
+            const currentAccentColor = getAccentColor();
+            this.currentValue = currentAccentColor;
+            // Apply the accent color to ensure it's active
+            applyAccentColor();
+        }
+        else if (this.type === "notes-style-medium") {
+            // Set up notes style medium cycling
+            this.values = ["default", "big", "gallery"];
+            // Set initial value based on current notes style medium
+            const currentNotesStyle = getNotesStyleMedium();
+            this.currentValue = currentNotesStyle;
+            // Check if this should be disabled based on note behavior
+            const currentPageStyle = getPageStyle();
+            this.disabled = currentPageStyle === "note";
+        }
+        else if (this.type === "page-style") {
+            // Set up page style cycling
+            this.values = ["note", "page"];
+            // Set initial value based on current page style
+            const currentPageStyle = getPageStyle();
+            this.currentValue = currentPageStyle;
+        }
+        else if (this.type === "icon-only") {
+            // Set up icon-only cycling (no label)
+            this.values = ["note", "page"];
+            // Set initial value
+            this.currentValue = this.values[0];
+        }
+        // Request update to re-render with new values
+        this.requestUpdate();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        super.attributeChangedCallback(name, oldValue, newValue);
+        if (name === "type" && oldValue !== newValue) {
+            // Type changed, reinitialize values
+            this.initializeValues();
+        }
+    }
+    async setupInitialValue() {
+        if (this.type === "language") {
+            // Get current language
+            const currentLang = currentLanguage.value;
+            this.currentValue = currentLang;
+        }
+        else if (this.type === "theme") {
+            // Get current theme
+            const currentThemeValue = currentTheme.get();
+            this.currentValue = currentThemeValue;
+        }
+        else if (this.type === "accent-color") {
+            // Get current accent color
+            const currentAccentColor = getAccentColor();
+            this.currentValue = currentAccentColor;
+            // Apply the accent color to ensure it's active
+            applyAccentColor();
+        }
+        else if (this.type === "notes-style-medium") {
+            // Get current notes style medium
+            const currentNotesStyle = getNotesStyleMedium();
+            this.currentValue = currentNotesStyle;
+            // Check if this should be disabled based on note behavior
+            const currentPageStyle = getPageStyle();
+            this.disabled = currentPageStyle === "note";
+        }
+        else if (this.type === "page-style") {
+            // Get current page style
+            const currentPageStyle = getPageStyle();
+            this.currentValue = currentPageStyle;
+        }
+        else if (this.type === "icon-only") {
+            // Get current page style for icon-only
+            const currentPageStyle = getPageStyle();
+            this.currentValue = currentPageStyle;
+        }
+        this.requestUpdate();
+    }
+    handleSettingsChanges() {
+        // Handle any settings changes that might affect this component
+        this.setupInitialValue();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        // Remove event listeners
+        window.removeEventListener("translations-loaded", this.boundHandlers.translationsLoaded);
+        window.removeEventListener("language-changed", this.boundHandlers.languageChanged);
+        window.removeEventListener("theme-changed", this.boundHandlers.handleThemeChanged);
+        window.removeEventListener("accent-color-changed", this.boundHandlers.handleAccentColorChanged);
+        window.removeEventListener("page-style-changed", this.boundHandlers.handleNoteBehaviorChanged);
+    }
+    handleButtonClick(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        // Don't handle clicks if disabled
+        if (this.disabled || this._fieldsetDisabled || !this.values.length || this.values.every(value => value === this.currentValue)) {
+            return;
+        }
+        if (this.type === "language") {
+            // Cycle through available languages
+            const currentIndex = this.values.indexOf(this.currentValue);
+            const nextIndex = (currentIndex + 1) % this.values.length;
+            const newLanguage = this.values[nextIndex];
+            // Update current value
+            this.currentValue = newLanguage;
+            // Set the new language with view transition like Portfolio
+            if (document.startViewTransition) {
+                document.startViewTransition(() => {
+                    setLanguage(newLanguage);
+                });
+            }
+            else {
+                setLanguage(newLanguage);
+            }
+            // Save preferences
+            savePreferences({ language: newLanguage });
+        }
+        else if (this.type === "theme") {
+            // Cycle through themes
+            const currentIndex = this.values.indexOf(this.currentValue);
+            const nextIndex = (currentIndex + 1) % this.values.length;
+            const newTheme = this.values[nextIndex];
+            // Update current value
+            this.currentValue = newTheme;
+            // Set the new theme using the shared helper
+            setTheme(newTheme);
+            // Save preferences
+            savePreferences({ theme: newTheme });
+            // Theme helper already emits the change event, so no manual dispatch here
+        }
+        else if (this.type === "accent-color") {
+            // Cycle through accent colors
+            const currentIndex = this.values.indexOf(this.currentValue);
+            const nextIndex = (currentIndex + 1) % this.values.length;
+            const newColor = this.values[nextIndex];
+            // Update current value
+            this.currentValue = newColor;
+            // Save the new accent color
+            saveAccentColor(newColor);
+            // Apply the new accent color
+            applyAccentColor();
+            // Save preferences
+            savePreferences({ accentColor: newColor });
+            // Dispatch accent color change event
+            window.dispatchEvent(new CustomEvent("accent-color-changed", {
+                detail: { color: newColor },
+            }));
+        }
+        else if (this.type === "notes-style-medium") {
+            // Cycle through notes style medium options
+            const currentIndex = this.values.indexOf(this.currentValue);
+            const nextIndex = (currentIndex + 1) % this.values.length;
+            const newStyle = this.values[nextIndex];
+            // Update current value
+            this.currentValue = newStyle;
+            // Save the new notes style medium
+            saveNotesStyleMedium(newStyle);
+            // Save preferences
+            savePreferences({ notesStyleMedium: newStyle });
+            // Dispatch notes style medium change event
+            window.dispatchEvent(new CustomEvent("notes-style-medium-changed", {
+                detail: { style: newStyle },
+            }));
+        }
+        else if (this.type === "page-style") {
+            // Cycle through note behavior options
+            const currentIndex = this.values.indexOf(this.currentValue);
+            const nextIndex = (currentIndex + 1) % this.values.length;
+            const newBehavior = this.values[nextIndex];
+            // Update current value
+            this.currentValue = newBehavior;
+            // Save the new note behavior
+            savePageStyle(newBehavior);
+            // Save preferences
+            savePreferences({ pageStyle: newBehavior });
+            // Dispatch note behavior change event
+            window.dispatchEvent(new CustomEvent("page-style-changed", {
+                detail: { behavior: newBehavior },
+            }));
+        }
+        else if (this.type === "icon-only") {
+            // Cycle through icon-only options (note/page)
+            const currentIndex = this.values.indexOf(this.currentValue);
+            const nextIndex = (currentIndex + 1) % this.values.length;
+            const newIconOnlyValue = this.values[nextIndex];
+            // Update current value
+            this.currentValue = newIconOnlyValue;
+            // Save the new page style
+            savePageStyle(newIconOnlyValue);
+            // Save preferences
+            savePreferences({ pageStyle: newIconOnlyValue });
+            // Dispatch page style change event
+            window.dispatchEvent(new CustomEvent("page-style-changed", {
+                detail: { behavior: newIconOnlyValue },
+            }));
+        }
+        // Request update to re-render
+        this.requestUpdate();
+    }
+    getValueDisplay(value) {
+        if (this.type === "language") {
+            return getLanguageDisplayName(value, {
+                locale: currentLanguage.value,
+            });
+        }
+        else if (this.type === "theme") {
+            // Try to get translated theme name
+            if (this.translationsReady) {
+                const translatedName = translate(value);
+                if (translatedName && translatedName !== value) {
+                    return translatedName;
+                }
+            }
+            // Fall back to the theme value itself
+            return value;
+        }
+        else if (this.type === "accent-color") {
+            // Get color name from CSS variable
+            return this.getColorName(value);
+        }
+        else if (this.type === "notes-style-medium") {
+            // Return SVG icon for notes style medium
+            return this.getNotesStyleIcon(value);
+        }
+        else if (this.type === "page-style") {
+            // Return translated text for note behavior
+            if (this.translationsReady) {
+                const translatedText = translate(value === "note" ? "Note" : "Page");
+                if (translatedText &&
+                    translatedText !== (value === "note" ? "Note" : "Page")) {
+                    return translatedText;
+                }
+            }
+            return value;
+        }
+        else if (this.type === "icon-only") {
+            // Return SVG icon for icon-only type (note/page icons)
+            if (value === "note") {
+                return html `<ds-icon type="note"></ds-icon>`;
+            }
+            else if (value === "page") {
+                return html `<ds-icon type="page"></ds-icon>`;
+            }
+            return html `<span>${value}</span>`;
+        }
+        return value;
+    }
+    getColorKey(colorVar) {
+        // Map CSS variables to translation text keys
+        const colorMap = {
+            "--tuned-red": "Red",
+            "--orange": "Orange",
+            "--yellow": "Yellow",
+            "--apple-green": "Apple green",
+            "--every-green": "Green",
+            "--zenith-blue": "Light blue",
+            "--sharp-blue": "Blue",
+            "--pink": "Pink",
+        };
+        return colorMap[colorVar] || colorVar.replace("--", "").replace("-", " ");
+    }
+    getColorName(colorVar) {
+        // Map CSS variables to translation text keys
+        const colorMap = {
+            "--tuned-red": "Red",
+            "--orange": "Orange",
+            "--yellow": "Yellow",
+            "--apple-green": "Apple green",
+            "--every-green": "Green",
+            "--zenith-blue": "Light blue",
+            "--sharp-blue": "Blue",
+            "--pink": "Pink",
+        };
+        const translationText = colorMap[colorVar];
+        if (translationText && this.translationsReady) {
+            const translatedName = translate(translationText);
+            if (translatedName && translatedName !== translationText) {
+                return translatedName;
+            }
+        }
+        // Fallback to simple name conversion
+        return colorVar.replace("--", "").replace("-", " ");
+    }
+    getNotesStyleIcon(style) {
+        if (style === "page") {
+            return html `<ds-icon type="page"></ds-icon>`;
+        }
+        else if (style === "note") {
+            return html `<ds-icon type="note"></ds-icon>`;
+        }
+        else if (style === "default") {
+            return html `<ds-icon type="default"></ds-icon>`;
+        }
+        else if (style === "big") {
+            return html `<ds-icon type="big"></ds-icon>`;
+        }
+        else if (style === "gallery") {
+            return html `<ds-icon type="gallery"></ds-icon>`;
+        }
+        return html `<span>${style}</span>`;
+    }
+    /**
+     * A cycle without a stated look takes the one its type has always had: the
+     * language and theme cycles are grey chips, every other one, the accent
+     * colour's included, is in the accent. Written onto the host before the
+     * first paint, so the inner button and any page sheet see the same word.
+     */
+    willUpdate(changed) {
+        if (changed.has("variant") && this.variant) {
+            this.primary = this.variant === "primary";
+            this.secondary = this.variant === "secondary";
+        }
+        if ((!this.hasUpdated || changed.has("type")) && !this.primary && !this.secondary) {
+            if (this.type === "language" || this.type === "theme")
+                this.secondary = true;
+            else
+                this.primary = true;
+        }
+    }
+    render() {
+        return html `
+      <div class="cycle">
+        <ds-button fit
+          ?primary=${this.primary && !this.secondary}
+          ?secondary=${this.secondary}
+          ?disabled=${this.disabled || this._fieldsetDisabled}
+          @click=${this.handleButtonClick}
+        >
+          ${this.type === "notes-style-medium" || this.type === "icon-only"
+            ? html `<span
+                style="display: inline-flex; align-items: center; gap: var(--025)"
+                >${this.getValueDisplay(this.currentValue)}</span
+              >`
+            : this.type === "language"
+                ? html `<ds-text
+                  literal text=${this.getValueDisplay(this.currentValue)}
+                ></ds-text>`
+                : this.type === "theme"
+                    ? html `<ds-text
+                    text=${this.currentValue === "light" ? "Light" : "Dark"}
+                  ></ds-text>`
+                    : this.type === "accent-color"
+                        ? html `<ds-text
+                      text=${this.getColorKey(this.currentValue)}
+                    ></ds-text>`
+                        : this.type === "page-style"
+                            ? html `<ds-text
+                        text=${this.currentValue === "note" ? "Note" : "Page"}
+                      ></ds-text>`
+                            : html `<ds-text
+                        literal text=${this.getValueDisplay(this.currentValue)}
+                      ></ds-text>`}
+        </ds-button>
+      </div>
+    `;
+    }
+    handleTranslationsLoaded() {
+        this.translationsReady = true;
+        // Refresh language values if this is a language cycle
+        if (this.type === "language") {
+            const availableLanguages = getAvailableLanguagesSync();
+            this.values = availableLanguages;
+        }
+        this.setupInitialValue();
+    }
+    handleLanguageChanged() {
+        this.setupInitialValue();
+    }
+    handleThemeChanged() {
+        this.setupInitialValue();
+    }
+    handleAccentColorChanged() {
+        this.setupInitialValue();
+    }
+    handleNoteBehaviorChanged() {
+        this.setupInitialValue();
+    }
+}
+Cycle.formAssociated = true;
+Cycle.styles = unsafeCSS(styles);
+define("ds-cycle", Cycle);

package/dist/2-core/ds-date.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from "lit";
+/**
+ * A component for displaying the current year
+ *
+ * @element ds-date
+ */
+export declare class DateComponent extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-date": DateComponent;
+    }
+}
+//# sourceMappingURL=ds-date.d.ts.map

package/dist/2-core/ds-date.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-date.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-date.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAGlD;;;;GAIG;AACH,qBAAa,aAAc,SAAQ,UAAU;IAC3C,MAAM,CAAC,MAAM,0BAAqB;IAElC,MAAM;CAIP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,aAAa,CAAC;KAC1B;CACF"}

package/dist/2-core/ds-date.js

@@ -0,0 +1,15 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import styles from "./styles/ds-date.css?inline";
+/**
+ * A component for displaying the current year
+ *
+ * @element ds-date
+ */
+export class DateComponent extends LitElement {
+    render() {
+        const year = new Date().getFullYear();
+        return html `<span>${year}</span>`;
+    }
+}
+DateComponent.styles = unsafeCSS(styles);
+customElements.define("ds-date", DateComponent);

package/dist/2-core/ds-file-picker.d.ts

@@ -0,0 +1,65 @@
+import { LitElement } from "lit";
+import "./ds-button";
+/** Native file selection, forms and focus, with one shared Button face. */
+export declare class FilePicker extends LitElement {
+    static properties: {
+        label: {
+            type: StringConstructor;
+        };
+        icon: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        preview: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        area: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        dragging: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        compact: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        primary: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        secondary: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResult;
+    label: string;
+    icon: boolean;
+    preview: boolean;
+    area: boolean;
+    dragging: boolean;
+    compact: boolean;
+    primary: boolean;
+    secondary: boolean;
+    private controlDisabled;
+    private observer;
+    constructor();
+    private control;
+    private syncDisabled;
+    private showDrag;
+    private clearDrag;
+    private observeControl;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    focus(options?: FocusOptions): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-file-picker": FilePicker;
+    }
+}
+//# sourceMappingURL=ds-file-picker.d.ts.map

package/dist/2-core/ds-file-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-file-picker.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-file-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAElD,OAAO,aAAa,CAAC;AAGrB,2EAA2E;AAC3E,qBAAa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MASf;IACF,MAAM,CAAC,MAAM,0BAAqB;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,QAAQ,CAAmD;;IAMnE,OAAO,CAAC,OAAO;IACf,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,QAAQ,CAKd;IACF,OAAO,CAAC,SAAS,CAAoD;IACrE,OAAO,CAAC,cAAc;IAUtB,iBAAiB;IAMjB,oBAAoB;IAOpB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAC5B,MAAM;CAMP;AAED,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,gBAAgB,EAAE,UAAU,CAAA;KAAE;CAAE"}

package/dist/2-core/ds-file-picker.js

@@ -0,0 +1,80 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import { define } from "../0-face/define";
+import "./ds-button";
+import styles from "./styles/ds-file-picker.css?inline";
+/** Native file selection, forms and focus, with one shared Button face. */
+export class FilePicker extends LitElement {
+    constructor() {
+        super();
+        this.controlDisabled = false;
+        this.observer = new MutationObserver(() => this.syncDisabled());
+        this.showDrag = (event) => {
+            const control = this.control();
+            if (control && !control.matches(":disabled") && event.dataTransfer?.types.includes("Files")) {
+                this.setAttribute("data-dragging", "");
+            }
+        };
+        this.clearDrag = () => { this.removeAttribute("data-dragging"); };
+        this.label = "";
+        this.icon = this.preview = this.area = this.dragging = this.compact = this.primary = this.secondary = false;
+    }
+    control() { return this.querySelector(":scope > input[type=file]"); }
+    syncDisabled() {
+        if (!this.isConnected)
+            return;
+        const control = this.control();
+        this.toggleAttribute("data-menu-item", control?.getAttribute("role") === "menuitem");
+        this.controlDisabled = !control || control.matches(":disabled");
+        this.toggleAttribute("data-disabled", this.controlDisabled);
+        if (this.controlDisabled)
+            this.clearDrag();
+        this.requestUpdate();
+    }
+    observeControl() {
+        this.observer.disconnect();
+        if (!this.isConnected)
+            return;
+        const control = this.control();
+        if (control)
+            this.observer.observe(control, { attributes: true, attributeFilter: ["disabled", "role"] });
+        for (let parent = this.parentElement; parent; parent = parent.parentElement) {
+            if (parent.localName === "fieldset")
+                this.observer.observe(parent, { attributes: true, attributeFilter: ["disabled"] });
+        }
+        this.syncDisabled();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.observeControl();
+        this.addEventListener("dragenter", this.showDrag);
+        this.addEventListener("dragleave", this.clearDrag);
+        this.addEventListener("drop", this.clearDrag);
+    }
+    disconnectedCallback() {
+        this.observer.disconnect();
+        this.clearDrag();
+        this.removeEventListener("dragenter", this.showDrag);
+        this.removeEventListener("dragleave", this.clearDrag);
+        this.removeEventListener("drop", this.clearDrag);
+        super.disconnectedCallback();
+    }
+    focus(options) { this.control()?.focus(options); }
+    render() {
+        return html `<ds-button control="host" inert aria-hidden="true" tabindex="-1"
+      .icon=${!this.area && (this.icon || this.preview)} .primary=${this.primary} .secondary=${this.secondary || this.area}
+      .disabled=${this.controlDisabled}><slot name="content">${this.label}</slot></ds-button>
+      <slot @slotchange=${this.observeControl}></slot>`;
+    }
+}
+FilePicker.properties = {
+    label: { type: String },
+    icon: { type: Boolean, reflect: true },
+    preview: { type: Boolean, reflect: true },
+    area: { type: Boolean, reflect: true },
+    dragging: { type: Boolean, reflect: true },
+    compact: { type: Boolean, reflect: true },
+    primary: { type: Boolean, reflect: true },
+    secondary: { type: Boolean, reflect: true },
+};
+FilePicker.styles = unsafeCSS(styles);
+define("ds-file-picker", FilePicker);