@hypoth-ui/wc 0.1.1

package/dist/chunk-VX5CKSMN.js

@@ -0,0 +1,39 @@
+import {
+  DSElement,
+  __decorateClass,
+  define
+} from "./chunk-H4GJJZ3N.js";
+
+// src/components/visually-hidden/visually-hidden.ts
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var DsVisuallyHidden = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.focusable = false;
+  }
+  static {
+    this.styles = [];
+  }
+  render() {
+    const classes = {
+      "ds-visually-hidden": true,
+      "ds-visually-hidden--focusable": this.focusable
+    };
+    return html`
+      <span class=${classMap(classes)}>
+        <slot></slot>
+      </span>
+    `;
+  }
+};
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DsVisuallyHidden.prototype, "focusable", 2);
+define("ds-visually-hidden", DsVisuallyHidden);
+
+export {
+  DsVisuallyHidden
+};
+//# sourceMappingURL=chunk-VX5CKSMN.js.map

package/dist/chunk-VX5CKSMN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/visually-hidden/visually-hidden.ts"],"sourcesContent":["import { type TemplateResult, html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { DSElement } from \"../../base/ds-element.js\";\nimport { define } from \"../../registry/define.js\";\n\n/**\n * A utility component that hides content visually while keeping it accessible to screen readers.\n *\n * Use this component to provide additional context for assistive technology users\n * that would be redundant or unnecessary for sighted users.\n *\n * @element ds-visually-hidden\n * @slot - Content to be hidden visually but announced by screen readers\n *\n * @example\n * ```html\n * <button>\n *   <ds-icon name=\"trash\" aria-hidden=\"true\"></ds-icon>\n *   <ds-visually-hidden>Delete item</ds-visually-hidden>\n * </button>\n * ```\n *\n * @example\n * ```html\n * <!-- Skip link that becomes visible on focus -->\n * <ds-visually-hidden focusable>\n *   <a href=\"#main-content\">Skip to main content</a>\n * </ds-visually-hidden>\n * ```\n */\nexport class DsVisuallyHidden extends DSElement {\n  static override styles = [];\n\n  /**\n   * When true, the content becomes visible when it or its children receive focus.\n   * Useful for skip links and other focus-triggered content.\n   */\n  @property({ type: Boolean, reflect: true })\n  focusable = false;\n\n  override render(): TemplateResult {\n    const classes = {\n      \"ds-visually-hidden\": true,\n      \"ds-visually-hidden--focusable\": this.focusable,\n    };\n\n    return html`\n      <span class=${classMap(classes)}>\n        <slot></slot>\n      </span>\n    `;\n  }\n}\n\n// Register the component\ndefine(\"ds-visually-hidden\", DsVisuallyHidden);\n\n// TypeScript declaration for HTML\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ds-visually-hidden\": DsVisuallyHidden;\n  }\n}\n"],"mappings":";;;;;;;AAAA,SAA8B,YAAY;AAC1C,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AA6BlB,IAAM,mBAAN,cAA+B,UAAU;AAAA,EAAzC;AAAA;AAQL,qBAAY;AAAA;AAAA,EAPZ;AAAA,SAAgB,SAAS,CAAC;AAAA;AAAA,EASjB,SAAyB;AAChC,UAAM,UAAU;AAAA,MACd,sBAAsB;AAAA,MACtB,iCAAiC,KAAK;AAAA,IACxC;AAEA,WAAO;AAAA,oBACS,SAAS,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA,EAInC;AACF;AAdE;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAP/B,iBAQX;AAiBF,OAAO,sBAAsB,gBAAgB;","names":[]}