ember-primitives 0.59.1 → 0.60.0

package/dist/components/slider.css

@@ -0,0 +1,203 @@
+/**
+ * Structural styles for <Slider>.
+ *
+ * These handle the annoying parts of building a custom slider on top of
+ * native <input type="range"> elements:
+ *   - stretching an invisible native input over the track (so keyboard,
+ *     pointer, and assistive-tech behavior all come from the platform)
+ *   - letting multiple overlapping inputs coexist (multi-thumb / range
+ *     sliders) by routing pointer events through the native thumb only
+ *   - vertical orientation (via `writing-mode`, no rotation hacks)
+ *   - positioning the visual thumb and keeping the active thumb on top
+ *
+ * Appearance (colors, exact sizes) is left to the consumer.
+ *
+ * Everything is wrapped in `@layer ember-primitives`, so *any* unlayered
+ * consumer rule overrides these -- regardless of specificity or order.
+ *
+ * This is a plain stylesheet (bundled like any other CSS), so styles are
+ * present at first layout -- no waiting on a render cycle. If you render
+ * the slider inside a shadow root, bring this stylesheet into that root
+ * yourself (e.g. adopt it, or @import it in the shadow tree).
+ *
+ * Knobs:
+ *   --ember-primitives__slider__hit-area         pointer target size (default 24px)
+ *   --ember-primitives__slider__thumb-size       visual thumb size (default 16px)
+ *   --ember-primitives__slider__track-thickness  rail thickness (default 4px)
+ *   --ember-primitives__slider__vertical-size    length of a vertical slider (default 10rem)
+ */
+@layer ember-primitives {
+  .ember-primitives__slider {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-height: var(--ember-primitives__slider__hit-area, 24px);
+  }
+
+  .ember-primitives__slider[data-orientation="vertical"] {
+    flex-direction: column;
+    min-height: 0;
+    min-width: var(--ember-primitives__slider__hit-area, 24px);
+    height: var(--ember-primitives__slider__vertical-size, 10rem);
+  }
+
+  .ember-primitives__slider__track {
+    position: relative;
+    flex: 1;
+    height: var(--ember-primitives__slider__track-thickness, 4px);
+  }
+
+  .ember-primitives__slider[data-orientation="vertical"] .ember-primitives__slider__track {
+    height: auto;
+    width: var(--ember-primitives__slider__track-thickness, 4px);
+  }
+
+  .ember-primitives__slider__range {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+  }
+
+  .ember-primitives__slider[data-orientation="vertical"] .ember-primitives__slider__range {
+    top: auto;
+    bottom: auto;
+    left: 0;
+    right: 0;
+  }
+
+  /*
+    The native input is stretched across the whole track, invisible, and only
+    used for interaction. The visual thumb (a sibling) is what users see.
+  */
+  .ember-primitives__slider__thumb-input {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    translate: 0 -50%;
+    width: 100%;
+    height: var(--ember-primitives__slider__hit-area, 24px);
+    margin: 0;
+    opacity: 0;
+    appearance: none;
+    background: transparent;
+    cursor: pointer;
+  }
+
+  .ember-primitives__slider__thumb-input:disabled {
+    cursor: not-allowed;
+  }
+
+  .ember-primitives__slider__thumb-input[data-active] {
+    z-index: 2;
+  }
+
+  /*
+    Size the (invisible) native thumb to the hit area, so grabbing "the thumb"
+    feels right. These cannot be comma-combined: an unknown pseudo-element
+    invalidates the whole selector list in the other engine.
+  */
+  .ember-primitives__slider__thumb-input::-webkit-slider-thumb {
+    appearance: none;
+    width: var(--ember-primitives__slider__hit-area, 24px);
+    height: var(--ember-primitives__slider__hit-area, 24px);
+  }
+
+  .ember-primitives__slider__thumb-input::-moz-range-thumb {
+    border: none;
+    width: var(--ember-primitives__slider__hit-area, 24px);
+    height: var(--ember-primitives__slider__hit-area, 24px);
+  }
+
+  /*
+    Multi-thumb sliders overlap multiple full-width range inputs. If the
+    inputs themselves receive pointer events, the top-most input steals
+    clicks/drags from the other thumbs. Disable pointer events on the
+    track-sized input and re-enable them on the native thumb only.
+
+    Single-thumb sliders keep the whole input interactive, so clicking
+    anywhere on the track jumps to that value.
+  */
+  .ember-primitives__slider[data-multi] .ember-primitives__slider__thumb-input {
+    pointer-events: none;
+  }
+
+  .ember-primitives__slider[data-multi]
+    .ember-primitives__slider__thumb-input::-webkit-slider-thumb {
+    pointer-events: auto;
+  }
+
+  .ember-primitives__slider[data-multi] .ember-primitives__slider__thumb-input::-moz-range-thumb {
+    pointer-events: auto;
+  }
+
+  /*
+    Vertical orientation: modern engines render a native vertical range input
+    with `writing-mode`. `direction: rtl` puts the minimum at the bottom.
+  */
+  .ember-primitives__slider[data-orientation="vertical"] .ember-primitives__slider__thumb-input {
+    writing-mode: vertical-lr;
+    direction: rtl;
+    top: 0;
+    left: 50%;
+    translate: -50% 0;
+    width: var(--ember-primitives__slider__hit-area, 24px);
+    height: 100%;
+  }
+
+  /*
+    The visual thumb. The component positions it with an inline
+    `left`/`bottom` percentage; centering uses the `translate` property
+    (not `transform`) so consumer hover/active effects like
+    `transform: scale(1.4)` or `scale: 1.4` compose with it instead of
+    clobbering it.
+  */
+  .ember-primitives__slider__thumb {
+    position: absolute;
+    top: 50%;
+    translate: -50% -50%;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .ember-primitives__slider__thumb[data-active] {
+    z-index: 3;
+  }
+
+  .ember-primitives__slider[data-orientation="vertical"] .ember-primitives__slider__thumb {
+    top: auto;
+    left: 50%;
+    translate: -50% 50%;
+  }
+
+  /*
+    Default appearance -- zero specificity via :where(), so any consumer rule
+    wins (even a layered one). Colors derive from currentColor so the slider
+    adapts to its context.
+  */
+  :where(.ember-primitives__slider__track) {
+    border-radius: calc(var(--ember-primitives__slider__track-thickness, 4px) / 2);
+    background: color-mix(in srgb, currentColor 20%, transparent);
+  }
+
+  :where(.ember-primitives__slider__range) {
+    border-radius: inherit;
+    background: currentColor;
+  }
+
+  :where(.ember-primitives__slider__thumb) {
+    width: var(--ember-primitives__slider__thumb-size, 16px);
+    height: var(--ember-primitives__slider__thumb-size, 16px);
+    border-radius: 50%;
+    background: currentColor;
+  }
+
+  :where(.ember-primitives__slider__thumb[data-disabled]) {
+    opacity: 0.5;
+  }
+
+  /* Keyboard focus is on the (invisible) input; reflect it on the visual thumb. */
+  :where(.ember-primitives__slider__thumb-input:focus-visible + .ember-primitives__slider__thumb) {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+}

package/dist/components/slider.js

@@ -0,0 +1,88 @@
+import "./slider.css"
+import Component from '@glimmer/component';
+import { hash } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { SliderStore } from './slider/store.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import templateOnly from '@ember/component/template-only';
+
+;
+
+const Track = setComponentTemplate(precompileTemplate("<span ...attributes class=\"ember-primitives__slider__track\">\n  {{yield}}\n</span>", {
+  strictMode: true
+}), templateOnly());
+const Range = setComponentTemplate(precompileTemplate("<span ...attributes class=\"ember-primitives__slider__range\" style={{@rangeStyle}} />", {
+  strictMode: true
+}), templateOnly());
+class ThumbComponent extends Component {
+  get index() {
+    return this.args.thumb?.index ?? this.args.index ?? 0;
+  }
+  get value() {
+    // When using tick values, the `input` needs the internal index.
+    return this.args.thumb?.inputValue ?? this.args.value ?? this.args.store.internalMin;
+  }
+  get isActive() {
+    return this.args.store.activeThumbIndex === this.index;
+  }
+  get positionStyle() {
+    const percent = this.args.thumb?.percent ?? this.args.store.thumbPercents[this.index] ?? 0;
+    return this.args.store.thumbPositionStyle(percent);
+  }
+  readValue(event) {
+    // In docs live previews the component may run in an iframe/shadow realm,
+    // where `instanceof HTMLInputElement` is not reliable. `currentTarget` is
+    // the element the handler is attached to.
+    const el = event.currentTarget;
+    const raw = el?.value;
+    const parsed = raw === undefined ? NaN : Number.parseFloat(raw);
+    return Number.isFinite(parsed) ? parsed : this.value;
+  }
+  onInput = event => {
+    this.args.store.handleThumbActivate(this.index);
+    this.args.store.handleThumbInput(this.index, this.readValue(event));
+  };
+  onChange = event => {
+    this.args.store.handleThumbActivate(this.index);
+    this.args.store.handleThumbChange(this.index, this.readValue(event));
+  };
+  onPointerUp = () => {
+    this.args.store.handleThumbActivate(this.index);
+  };
+  onGotPointerCapture = () => {
+    this.args.store.handleThumbActivate(this.index);
+  };
+  onFocus = () => {
+    this.args.store.handleThumbActivate(this.index);
+  };
+  static {
+    setComponentTemplate(precompileTemplate("<input ...attributes class=\"ember-primitives__slider__thumb-input\" type=\"range\" min={{@store.internalMin}} max={{@store.internalMax}} step={{@store.internalStep}} value={{this.value}} disabled={{@store.disabled}} data-active={{if this.isActive \"\"}} {{on \"gotpointercapture\" this.onGotPointerCapture}} {{on \"pointerup\" this.onPointerUp}} {{on \"focus\" this.onFocus}} {{on \"input\" this.onInput}} {{on \"change\" this.onChange}} />\n<span class=\"ember-primitives__slider__thumb\" style={{this.positionStyle}} data-active={{if this.isActive \"\"}} data-disabled={{if @store.disabled \"\"}} aria-hidden=\"true\">{{yield}}</span>", {
+      strictMode: true,
+      scope: () => ({
+        on
+      })
+    }), this);
+  }
+}
+class Slider extends Component {
+  store;
+  constructor(owner, args) {
+    super(owner, args);
+    this.store = new SliderStore(() => this.args);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<span ...attributes class=\"ember-primitives__slider\" data-orientation={{this.store.orientation}} data-disabled={{if this.store.disabled \"\"}} data-multi={{if this.store.isMulti \"\"}}>\n  {{#if (has-block)}}\n    {{yield (hash Track=Track Range=(component Range rangeStyle=this.store.rangeStyle) Thumb=(component ThumbComponent store=this.store) values=this.store.values tickValues=this.store.tickValues thumbs=this.store.thumbs min=this.store.min max=this.store.max step=this.store.step)}}\n  {{else}}\n    <Track>\n      <Range @rangeStyle={{this.store.rangeStyle}} />\n\n      {{#each this.store.thumbs as |thumb|}}\n        <ThumbComponent @store={{this.store}} @thumb={{thumb}} aria-label={{this.store.defaultThumbLabel thumb.index}} />\n      {{/each}}\n    </Track>\n  {{/if}}\n</span>", {
+      strictMode: true,
+      scope: () => ({
+        hash,
+        Track,
+        Range,
+        ThumbComponent
+      })
+    }), this);
+  }
+}
+
+export { Slider, Slider as default };
+//# sourceMappingURL=slider.js.map

package/dist/components/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/index.js

@@ -20,6 +20,7 @@ export { R as Rating } from './rating-BrIiwDLw.js';
 export { Scroller } from './components/scroller.js';
 export { Separator } from './components/separator.js';
 export { Shadowed } from './components/shadowed.js';
+export { Slider } from './components/slider.js';
 export { Switch } from './components/switch.js';
 export { Toggle } from './components/toggle.js';
 export { ToggleGroup } from './components/toggle-group.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["/**\n * DANGER: this is a *barrel file*\n *\n * It forces the whole library to be loaded and all dependencies.\n *\n * If you have a small app, you probably don't want to import from here -- instead import from each sub-path.\n */\nimport { importSync, isDevelopingApp, macroCondition } from '@embroider/macros';\n\nif (macroCondition(isDevelopingApp())) {\n  importSync('./components/violations.css');\n}\n\nexport { Accordion } from './components/accordion.gts';\nexport type {\n  AccordionContentExternalSignature,\n  AccordionHeaderExternalSignature,\n  AccordionItemExternalSignature,\n  AccordionTriggerExternalSignature,\n} from './components/accordion/public.ts';\nexport { Avatar } from './components/avatar.gts';\nexport { Breadcrumb } from './components/breadcrumb.gts';\nexport { Dialog, Dialog as Modal } from './components/dialog.gts';\nexport { Drawer } from './components/drawer.gts';\nexport { ExternalLink } from './components/external-link.gts';\nexport { Form } from './components/form.gts';\nexport { IncrementalEach } from './components/incremental-each.gts';\nexport { Key, KeyCombo } from './components/keys.gts';\nexport { StickyFooter } from './components/layout/sticky-footer.gts';\nexport { Link } from './components/link.gts';\nexport { Menu } from './components/menu.gts';\nexport { OTP, OTPInput } from './components/one-time-password.gts';\nexport { Popover } from './components/popover.gts';\nexport { Portal } from './components/portal.gts';\nexport { PortalTargets } from './components/portal-targets.gts';\nexport { TARGETS as PORTALS } from './components/portal-targets.gts';\nexport { Progress } from './components/progress.gts';\nexport { Rating } from './components/rating.gts';\nexport { Scroller } from './components/scroller.gts';\nexport { Separator } from './components/separator.gts';\nexport { Shadowed } from './components/shadowed.gts';\nexport { Switch } from './components/switch.gts';\nexport { Toggle } from './components/toggle.gts';\nexport { ToggleGroup } from './components/toggle-group.gts';\nexport { VisuallyHidden } from './components/visually-hidden.gts';\nexport { Zoetrope } from './components/zoetrope.ts';\nexport * from './helpers.ts';\n"],"names":["macroCondition","isDevelopingApp","importSync"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,IAAIA,cAAc,CAACC,eAAe,EAAE,CAAC,EAAE;EACrCC,UAAU,CAAC,6BAA6B,CAAC;AAC3C"}
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["/**\n * DANGER: this is a *barrel file*\n *\n * It forces the whole library to be loaded and all dependencies.\n *\n * If you have a small app, you probably don't want to import from here -- instead import from each sub-path.\n */\nimport { importSync, isDevelopingApp, macroCondition } from '@embroider/macros';\n\nif (macroCondition(isDevelopingApp())) {\n  importSync('./components/violations.css');\n}\n\nexport { Accordion } from './components/accordion.gts';\nexport type {\n  AccordionContentExternalSignature,\n  AccordionHeaderExternalSignature,\n  AccordionItemExternalSignature,\n  AccordionTriggerExternalSignature,\n} from './components/accordion/public.ts';\nexport { Avatar } from './components/avatar.gts';\nexport { Breadcrumb } from './components/breadcrumb.gts';\nexport { Dialog, Dialog as Modal } from './components/dialog.gts';\nexport { Drawer } from './components/drawer.gts';\nexport { ExternalLink } from './components/external-link.gts';\nexport { Form } from './components/form.gts';\nexport { IncrementalEach } from './components/incremental-each.gts';\nexport { Key, KeyCombo } from './components/keys.gts';\nexport { StickyFooter } from './components/layout/sticky-footer.gts';\nexport { Link } from './components/link.gts';\nexport { Menu } from './components/menu.gts';\nexport { OTP, OTPInput } from './components/one-time-password.gts';\nexport { Popover } from './components/popover.gts';\nexport { Portal } from './components/portal.gts';\nexport { PortalTargets } from './components/portal-targets.gts';\nexport { TARGETS as PORTALS } from './components/portal-targets.gts';\nexport { Progress } from './components/progress.gts';\nexport { Rating } from './components/rating.gts';\nexport { Scroller } from './components/scroller.gts';\nexport { Separator } from './components/separator.gts';\nexport { Shadowed } from './components/shadowed.gts';\nexport { Slider } from './components/slider.gts';\nexport { Switch } from './components/switch.gts';\nexport { Toggle } from './components/toggle.gts';\nexport { ToggleGroup } from './components/toggle-group.gts';\nexport { VisuallyHidden } from './components/visually-hidden.gts';\nexport { Zoetrope } from './components/zoetrope.ts';\nexport * from './helpers.ts';\n"],"names":["macroCondition","isDevelopingApp","importSync"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,IAAIA,cAAc,CAACC,eAAe,EAAE,CAAC,EAAE;EACrCC,UAAU,CAAC,6BAA6B,CAAC;AAC3C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-primitives",
-  "version": "0.59.1",
+  "version": "0.60.0",
   "description": "Making apps easier to build",
   "keywords": [
     "ember-addon"
@@ -20,7 +20,7 @@
     "@babel/runtime": "^7.28.6",
     "@embroider/addon-shim": "^1.10.2",
     "@floating-ui/dom": "^1.7.5",
-    "decorator-transforms": "2.3.1",
+    "decorator-transforms": "2.3.2",
     "ember-element-helper": "^0.8.8",
     "form-data-utils": "^0.6.0",
     "reactiveweb": "^1.9.1",
@@ -28,7 +28,7 @@
     "tabster": "^8.7.0",
     "tracked-built-ins": "^4.1.0",
     "tracked-toolbox": "^3.0.0",
-    "which-heading-do-i-need": "0.2.7"
+    "which-heading-do-i-need": "0.4.0"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.0",
@@ -61,6 +61,7 @@
     "ember-source": "^6.10.1",
     "ember-template-lint": "^7.9.3",
     "eslint": "^9.39.2",
+    "eslint-plugin-compat": "^7.0.2",
     "execa": "^9.6.0",
     "fix-bad-declaration-output": "^1.1.5",
     "prettier": "^3.8.1",
@@ -121,6 +122,12 @@
     "ember-modifier": ">= 4.1.0",
     "ember-resources": ">= 6.1.0"
   },
+  "browserslist": [
+    "last 2 Chrome versions",
+    "last 2 Firefox versions",
+    "last 2 Safari versions",
+    "last 2 Edge versions"
+  ],
   "peerDependenciesMeta": {
     "@ember/test-helpers": {
       "optional": true