@compa11y/web 0.1.0

package/dist/utils/styles.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Shared styles for compa11y Web Components
+ */
+export declare const VISUALLY_HIDDEN_STYLES = "\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n";
+export declare const RESET_BUTTON_STYLES = "\n  appearance: none;\n  background: none;\n  border: none;\n  padding: 0;\n  margin: 0;\n  font: inherit;\n  color: inherit;\n  cursor: pointer;\n";
+export declare const FOCUS_VISIBLE_STYLES = "\n  :host(:focus-visible),\n  :focus-visible {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n";
+/**
+ * Base styles shared by all components
+ */
+export declare const BASE_STYLES = "\n  :host {\n    display: block;\n    box-sizing: border-box;\n  }\n\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: inherit;\n  }\n\n  \n  :host(:focus-visible),\n  :focus-visible {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n\n";
+/**
+ * Dialog-specific styles
+ */
+export declare const DIALOG_STYLES = "\n  \n  :host {\n    display: block;\n    box-sizing: border-box;\n  }\n\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: inherit;\n  }\n\n  \n  :host(:focus-visible),\n  :focus-visible {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n\n\n\n  :host {\n    position: fixed;\n    inset: 0;\n    z-index: var(--compa11y-dialog-z-index, 9999);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .overlay {\n    position: absolute;\n    inset: 0;\n    background: var(--compa11y-dialog-overlay-bg, rgba(0, 0, 0, 0.5));\n  }\n\n  .dialog {\n    position: relative;\n    background: var(--compa11y-dialog-bg, white);\n    border-radius: var(--compa11y-dialog-radius, 8px);\n    padding: var(--compa11y-dialog-padding, 1.5rem);\n    max-width: var(--compa11y-dialog-max-width, 500px);\n    max-height: var(--compa11y-dialog-max-height, 85vh);\n    overflow: auto;\n    box-shadow: var(--compa11y-dialog-shadow, 0 25px 50px -12px rgba(0, 0, 0, 0.25));\n  }\n\n  ::slotted([slot=\"title\"]) {\n    margin: 0 0 0.5rem 0;\n    font-size: 1.25rem;\n    font-weight: 600;\n  }\n\n  ::slotted([slot=\"description\"]) {\n    margin: 0 0 1rem 0;\n    color: var(--compa11y-dialog-description-color, #666);\n  }\n";
+/**
+ * Menu-specific styles
+ */
+export declare const MENU_STYLES = "\n  \n  :host {\n    display: block;\n    box-sizing: border-box;\n  }\n\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: inherit;\n  }\n\n  \n  :host(:focus-visible),\n  :focus-visible {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n\n\n\n  :host {\n    position: relative;\n    display: inline-block;\n  }\n\n  .menu-content {\n    position: absolute;\n    top: 100%;\n    left: 0;\n    z-index: var(--compa11y-menu-z-index, 1000);\n    min-width: var(--compa11y-menu-min-width, 160px);\n    background: var(--compa11y-menu-bg, white);\n    border: var(--compa11y-menu-border, 1px solid #e0e0e0);\n    border-radius: var(--compa11y-menu-radius, 4px);\n    box-shadow: var(--compa11y-menu-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.1));\n    padding: var(--compa11y-menu-padding, 0.25rem 0);\n    margin-top: var(--compa11y-menu-offset, 4px);\n  }\n\n  .menu-content[hidden] {\n    display: none;\n  }\n\n  ::slotted([role=\"menuitem\"]) {\n    display: block;\n    width: 100%;\n    padding: 0.5rem 1rem;\n    text-align: left;\n    background: none;\n    border: none;\n    cursor: pointer;\n    font: inherit;\n  }\n\n  ::slotted([role=\"menuitem\"]:hover),\n  ::slotted([role=\"menuitem\"][data-highlighted=\"true\"]) {\n    background: var(--compa11y-menu-item-hover-bg, #f5f5f5);\n  }\n\n  ::slotted([role=\"menuitem\"][aria-disabled=\"true\"]) {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  ::slotted([role=\"separator\"]) {\n    height: 1px;\n    margin: 0.25rem 0;\n    background: var(--compa11y-menu-separator-color, #e0e0e0);\n  }\n";
+/**
+ * Tabs-specific styles
+ */
+export declare const TABS_STYLES = "\n  \n  :host {\n    display: block;\n    box-sizing: border-box;\n  }\n\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: inherit;\n  }\n\n  \n  :host(:focus-visible),\n  :focus-visible {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n\n\n\n  .tablist {\n    display: flex;\n    border-bottom: var(--compa11y-tabs-border, 1px solid #e0e0e0);\n    gap: var(--compa11y-tabs-gap, 0);\n  }\n\n  :host([orientation=\"vertical\"]) .tablist {\n    flex-direction: column;\n    border-bottom: none;\n    border-right: var(--compa11y-tabs-border, 1px solid #e0e0e0);\n  }\n\n  ::slotted([role=\"tab\"]) {\n    \n  appearance: none;\n  background: none;\n  border: none;\n  padding: 0;\n  margin: 0;\n  font: inherit;\n  color: inherit;\n  cursor: pointer;\n\n    padding: var(--compa11y-tab-padding, 0.75rem 1rem);\n    border-bottom: 2px solid transparent;\n    margin-bottom: -1px;\n    font-weight: 500;\n    color: var(--compa11y-tab-color, #666);\n    transition: all 0.15s ease;\n  }\n\n  ::slotted([role=\"tab\"]:hover) {\n    color: var(--compa11y-tab-hover-color, #333);\n  }\n\n  ::slotted([role=\"tab\"][aria-selected=\"true\"]) {\n    color: var(--compa11y-tab-active-color, #0066cc);\n    border-bottom-color: currentColor;\n  }\n\n  ::slotted([role=\"tab\"][aria-disabled=\"true\"]) {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  ::slotted([role=\"tabpanel\"]) {\n    padding: var(--compa11y-tabpanel-padding, 1rem 0);\n  }\n\n  ::slotted([role=\"tabpanel\"][hidden]) {\n    display: none;\n  }\n";
+/**
+ * Combobox-specific styles
+ */
+export declare const COMBOBOX_STYLES = "\n  \n  :host {\n    display: block;\n    box-sizing: border-box;\n  }\n\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: inherit;\n  }\n\n  \n  :host(:focus-visible),\n  :focus-visible {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n\n\n\n  :host {\n    display: inline-block;\n    position: relative;\n    width: var(--compa11y-combobox-width, 250px);\n  }\n\n  .combobox-wrapper {\n    position: relative;\n  }\n\n  .input-wrapper {\n    position: relative;\n    display: flex;\n    align-items: center;\n  }\n\n  input {\n    width: 100%;\n    padding: var(--compa11y-combobox-input-padding, 0.5rem 2rem 0.5rem 0.75rem);\n    border: var(--compa11y-combobox-border, 1px solid #ccc);\n    border-radius: var(--compa11y-combobox-radius, 4px);\n    font: inherit;\n    background: var(--compa11y-combobox-bg, white);\n    color: var(--compa11y-combobox-color, inherit);\n  }\n\n  input:focus {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: -1px;\n    border-color: var(--compa11y-focus-color, #0066cc);\n  }\n\n  input::placeholder {\n    color: var(--compa11y-combobox-placeholder-color, #999);\n  }\n\n  input:disabled {\n    background: var(--compa11y-combobox-disabled-bg, #f5f5f5);\n    cursor: not-allowed;\n    opacity: 0.7;\n  }\n\n  .chevron {\n    position: absolute;\n    right: 0.5rem;\n    pointer-events: none;\n    font-size: 0.75rem;\n    color: var(--compa11y-combobox-chevron-color, #666);\n    transition: transform 0.15s ease;\n  }\n\n  :host([open]) .chevron {\n    transform: rotate(180deg);\n  }\n\n  .clear-button {\n    \n  appearance: none;\n  background: none;\n  border: none;\n  padding: 0;\n  margin: 0;\n  font: inherit;\n  color: inherit;\n  cursor: pointer;\n\n    position: absolute;\n    right: 1.5rem;\n    width: 1.25rem;\n    height: 1.25rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 50%;\n    font-size: 1rem;\n    color: var(--compa11y-combobox-clear-color, #666);\n  }\n\n  .clear-button:hover {\n    background: var(--compa11y-combobox-clear-hover-bg, rgba(0, 0, 0, 0.1));\n  }\n\n  .clear-button[hidden] {\n    display: none;\n  }\n\n  .listbox {\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: var(--compa11y-combobox-z-index, 1000);\n    max-height: var(--compa11y-combobox-max-height, 200px);\n    overflow-y: auto;\n    margin: 0;\n    padding: var(--compa11y-combobox-listbox-padding, 0.25rem 0);\n    background: var(--compa11y-combobox-listbox-bg, white);\n    border: var(--compa11y-combobox-listbox-border, 1px solid #e0e0e0);\n    border-radius: var(--compa11y-combobox-radius, 4px);\n    box-shadow: var(--compa11y-combobox-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.1));\n    list-style: none;\n  }\n\n  /* Flip chevron when listbox is positioned above */\n  :host([data-position=\"top\"]) .chevron {\n    transform: rotate(180deg);\n  }\n\n  :host([data-position=\"top\"][open]) .chevron {\n    transform: rotate(0deg);\n  }\n\n  .listbox[hidden] {\n    display: none;\n  }\n\n  .listbox li[role=\"option\"] {\n    padding: var(--compa11y-combobox-option-padding, 0.5rem 0.75rem);\n    cursor: pointer;\n    transition: background 0.1s ease;\n  }\n\n  .listbox li[role=\"option\"]:hover,\n  .listbox li[role=\"option\"].highlighted {\n    background: var(--compa11y-combobox-option-hover-bg, #f5f5f5);\n  }\n\n  .listbox li[role=\"option\"][aria-selected=\"true\"] {\n    background: var(--compa11y-combobox-option-selected-bg, #e6f0ff);\n    font-weight: 500;\n  }\n\n  .listbox li[role=\"option\"].disabled,\n  .listbox li[role=\"option\"][aria-disabled=\"true\"] {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .empty-message {\n    padding: var(--compa11y-combobox-option-padding, 0.5rem 0.75rem);\n    color: var(--compa11y-combobox-empty-color, #666);\n    font-style: italic;\n  }\n\n  .options-source {\n    display: none;\n  }\n";
+/**
+ * Switch-specific styles
+ */
+export declare const SWITCH_STYLES = "\n  \n  :host {\n    display: block;\n    box-sizing: border-box;\n  }\n\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: inherit;\n  }\n\n  \n  :host(:focus-visible),\n  :focus-visible {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n\n\n\n  :host {\n    display: inline-block;\n  }\n\n  .switch-wrapper {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--compa11y-switch-gap, 0.5rem);\n  }\n\n  /* Size variants */\n  .switch-wrapper.size-sm .switch-track {\n    width: var(--compa11y-switch-width-sm, 32px);\n    height: var(--compa11y-switch-height-sm, 18px);\n  }\n\n  .switch-wrapper.size-sm .switch-thumb {\n    width: var(--compa11y-switch-thumb-sm, 14px);\n    height: var(--compa11y-switch-thumb-sm, 14px);\n  }\n\n  .switch-wrapper.size-sm .switch-track.checked .switch-thumb {\n    transform: translateX(14px);\n  }\n\n  .switch-wrapper.size-md .switch-track {\n    width: var(--compa11y-switch-width-md, 44px);\n    height: var(--compa11y-switch-height-md, 24px);\n  }\n\n  .switch-wrapper.size-md .switch-thumb {\n    width: var(--compa11y-switch-thumb-md, 20px);\n    height: var(--compa11y-switch-thumb-md, 20px);\n  }\n\n  .switch-wrapper.size-md .switch-track.checked .switch-thumb {\n    transform: translateX(20px);\n  }\n\n  .switch-wrapper.size-lg .switch-track {\n    width: var(--compa11y-switch-width-lg, 56px);\n    height: var(--compa11y-switch-height-lg, 30px);\n  }\n\n  .switch-wrapper.size-lg .switch-thumb {\n    width: var(--compa11y-switch-thumb-lg, 26px);\n    height: var(--compa11y-switch-thumb-lg, 26px);\n  }\n\n  .switch-wrapper.size-lg .switch-track.checked .switch-thumb {\n    transform: translateX(26px);\n  }\n\n  .switch-track {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n    padding: 2px;\n    border: none;\n    border-radius: var(--compa11y-switch-radius, 9999px);\n    background: var(--compa11y-switch-bg, #d1d5db);\n    cursor: pointer;\n    transition: background-color 0.2s ease;\n    outline: none;\n  }\n\n  .switch-track:focus-visible {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n\n  .switch-track.checked {\n    background: var(--compa11y-switch-checked-bg, #0066cc);\n  }\n\n  .switch-track:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .switch-thumb {\n    position: absolute;\n    left: 2px;\n    background: var(--compa11y-switch-thumb-bg, white);\n    border-radius: 50%;\n    box-shadow: var(--compa11y-switch-thumb-shadow, 0 1px 3px rgba(0, 0, 0, 0.2));\n    transition: transform 0.2s ease;\n    pointer-events: none;\n  }\n\n  .switch-label {\n    user-select: none;\n    cursor: pointer;\n    color: var(--compa11y-switch-label-color, inherit);\n  }\n\n  .switch-label.disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n";
+//# sourceMappingURL=styles.d.ts.map

package/dist/utils/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/utils/styles.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,sBAAsB,mLAUlC,CAAC;AAEF,eAAO,MAAM,mBAAmB,wJAS/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,kJAMhC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,0VAiBvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,+zCAuCzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,ioDAoDvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,wlDA8CvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,y8HA6I3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,+4FAwGzB,CAAC"}

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "@compa11y/web",
+  "version": "0.1.0",
+  "description": "Accessible Web Components for any HTML page - CDN ready",
+  "author": "Ivan Trajkovski",
+  "license": "MIT",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "homepage": "https://github.com/trajkovskiivan/compa11y#readme",
+  "bugs": {
+    "url": "https://github.com/trajkovskiivan/compa11y/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/trajkovskiivan/compa11y.git",
+    "directory": "packages/web"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/compa11y.js",
+      "require": "./dist/compa11y.umd.cjs"
+    },
+    "./dialog": {
+      "types": "./dist/components/dialog.d.ts",
+      "import": "./dist/components/dialog.js"
+    },
+    "./menu": {
+      "types": "./dist/components/menu.d.ts",
+      "import": "./dist/components/menu.js"
+    },
+    "./tabs": {
+      "types": "./dist/components/tabs.d.ts",
+      "import": "./dist/components/tabs.js"
+    },
+    "./combobox": {
+      "types": "./dist/components/combobox.d.ts",
+      "import": "./dist/components/combobox.js"
+    },
+    "./switch": {
+      "types": "./dist/components/switch.d.ts",
+      "import": "./dist/components/switch.js"
+    }
+  },
+  "unpkg": "./dist/compa11y.iife.js",
+  "jsdelivr": "./dist/compa11y.iife.js",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "@compa11y/core": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.0",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.7.0",
+    "vitest": "^1.2.0"
+  },
+  "sideEffects": true,
+  "keywords": [
+    "accessibility",
+    "a11y",
+    "web-components",
+    "custom-elements",
+    "cdn",
+    "dialog",
+    "modal",
+    "menu",
+    "tabs",
+    "combobox",
+    "autocomplete",
+    "select",
+    "switch",
+    "toggle"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist node_modules"
+  }
+}