ember-container-query 6.1.3 → 6.1.5

package/LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2025 Isaac J. Lee
+Copyright (c) 2026 Isaac J. Lee
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

package/README.md

@@ -124,7 +124,7 @@ Where can you use container queries? Here are real-life (and some theoretical) a
 
 </details>
 
-You will find plenty of examples in [`docs-app`](https://github.com/ijlee2/ember-container-query/tree/main/docs-app). Visit https://ember-container-query.netlify.app/ to see the app in action!
+You will find plenty of examples in [`docs-app`](../../docs-app). Visit https://ember-container-query.netlify.app/ to see the app in action!
 
 <div align="left">
   <img alt="A demo of ember-container-query shows a smooth transition when using a list or table to display data" src="https://user-images.githubusercontent.com/16869656/82177207-72699c00-989e-11ea-9cb6-2e388c5e98c0.gif" width="600" />
@@ -282,4 +282,4 @@ Much thanks goes to [Chad Carbert (@chadian)](https://github.com/chadian), who i
 
 ## License
 
-This project is licensed under the [MIT License](LICENSE.md).
+This project is licensed under the [MIT License](./LICENSE.md).

package/dist/components/container-query.js

@@ -29,7 +29,7 @@ class ContainerQuery extends Component {
     this.queryResults = queryResults;
   };
   static {
-    setComponentTemplate(precompileTemplate("\n    {{#let (element this.tagName) as |Tag|}}\n      <Tag class=\"container-query\" {{containerQuery dataAttributePrefix=@dataAttributePrefix debounce=@debounce features=@features onQuery=this.updateState}} ...attributes>\n        {{yield (hash dimensions=this.dimensions features=this.queryResults)}}\n      </Tag>\n    {{/let}}\n  ", {
+    setComponentTemplate(precompileTemplate("{{#let (element this.tagName) as |Tag|}}\n  <Tag class=\"container-query\" {{containerQuery dataAttributePrefix=@dataAttributePrefix debounce=@debounce features=@features onQuery=this.updateState}} ...attributes>\n    {{yield (hash dimensions=this.dimensions features=this.queryResults)}}\n  </Tag>\n{{/let}}", {
       strictMode: true,
       scope: () => ({
         element,

package/dist/helpers/aspect-ratio.js

@@ -1,4 +1,3 @@
-
 function aspectRatio(named) {
   const dimension = 'aspectRatio';
   const max = named?.max ?? Infinity;

package/dist/helpers/aspect-ratio.js.map

@@ -1 +1 @@
-{"version":3,"file":"aspect-ratio.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"aspect-ratio.js","sources":["../../src/helpers/aspect-ratio.ts"],"sourcesContent":["import type { Metadata } from '../modifiers/container-query.ts';\n\ntype Named = {\n  max?: number;\n  min?: number;\n};\n\nexport default function aspectRatio(named?: Named): Metadata {\n  const dimension = 'aspectRatio';\n  const max = named?.max ?? Infinity;\n  const min = named?.min ?? 0;\n\n  return { dimension, max, min };\n}\n"],"names":["aspectRatio","named","dimension","max","Infinity","min"],"mappings":"AAOe,SAASA,WAAWA,CAACC,KAAa,EAAY;EAC3D,MAAMC,SAAS,GAAG,aAAa;AAC/B,EAAA,MAAMC,GAAG,GAAGF,KAAK,EAAEE,GAAG,IAAIC,QAAQ;AAClC,EAAA,MAAMC,GAAG,GAAGJ,KAAK,EAAEI,GAAG,IAAI,CAAC;EAE3B,OAAO;IAAEH,SAAS;IAAEC,GAAG;AAAEE,IAAAA;GAAK;AAChC;;;;"}

package/dist/helpers/height.js

@@ -1,4 +1,3 @@
-
 function height(named) {
   const dimension = 'height';
   const max = named?.max ?? Infinity;

package/dist/helpers/height.js.map

@@ -1 +1 @@
-{"version":3,"file":"height.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"height.js","sources":["../../src/helpers/height.ts"],"sourcesContent":["import type { Metadata } from '../modifiers/container-query.ts';\n\ntype Named = {\n  max?: number;\n  min?: number;\n};\n\nexport default function height(named?: Named): Metadata {\n  const dimension = 'height';\n  const max = named?.max ?? Infinity;\n  const min = named?.min ?? 0;\n\n  return { dimension, max, min };\n}\n"],"names":["height","named","dimension","max","Infinity","min"],"mappings":"AAOe,SAASA,MAAMA,CAACC,KAAa,EAAY;EACtD,MAAMC,SAAS,GAAG,QAAQ;AAC1B,EAAA,MAAMC,GAAG,GAAGF,KAAK,EAAEE,GAAG,IAAIC,QAAQ;AAClC,EAAA,MAAMC,GAAG,GAAGJ,KAAK,EAAEI,GAAG,IAAI,CAAC;EAE3B,OAAO;IAAEH,SAAS;IAAEC,GAAG;AAAEE,IAAAA;GAAK;AAChC;;;;"}

package/dist/helpers/width.js

@@ -1,4 +1,3 @@
-
 function width(named) {
   const dimension = 'width';
   const max = named?.max ?? Infinity;

package/dist/helpers/width.js.map

@@ -1 +1 @@
-{"version":3,"file":"width.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"width.js","sources":["../../src/helpers/width.ts"],"sourcesContent":["import type { Metadata } from '../modifiers/container-query.ts';\n\ntype Named = {\n  max?: number;\n  min?: number;\n};\n\nexport default function width(named?: Named): Metadata {\n  const dimension = 'width';\n  const max = named?.max ?? Infinity;\n  const min = named?.min ?? 0;\n\n  return { dimension, max, min };\n}\n"],"names":["width","named","dimension","max","Infinity","min"],"mappings":"AAOe,SAASA,KAAKA,CAACC,KAAa,EAAY;EACrD,MAAMC,SAAS,GAAG,OAAO;AACzB,EAAA,MAAMC,GAAG,GAAGF,KAAK,EAAEE,GAAG,IAAIC,QAAQ;AAClC,EAAA,MAAMC,GAAG,GAAGJ,KAAK,EAAEI,GAAG,IAAI,CAAC;EAE3B,OAAO;IAAEH,SAAS;IAAEC,GAAG;AAAEE,IAAAA;GAAK;AAChC;;;;"}

package/dist/index.js

@@ -1,4 +1,3 @@
-
 export { default as ContainerQuery } from './components/container-query.js';
 export { default as aspectRatio } from './helpers/aspect-ratio.js';
 export { default as height } from './helpers/height.js';

package/dist/index.js.map

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

package/dist/modifiers/container-query.js

@@ -1,4 +1,3 @@
-
 import { registerDestructor } from '@ember/destroyable';
 import { action } from '@ember/object';
 import { debounce } from '@ember/runloop';

package/dist/modifiers/container-query.js.map

@@ -1 +1 @@
-{"version":3,"file":"container-query.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"container-query.js","sources":["../../src/modifiers/container-query.ts"],"sourcesContent":["import { registerDestructor } from '@ember/destroyable';\nimport { action } from '@ember/object';\nimport type Owner from '@ember/owner';\nimport { debounce as _debounce } from '@ember/runloop';\nimport type { ArgsFor, NamedArgs, PositionalArgs } from 'ember-modifier';\nimport Modifier from 'ember-modifier';\nimport { resizeObserver } from 'ember-primitives/resize-observer';\n\ntype IndexSignatureParameter = string | number | symbol;\ntype ObjectEntry<T> = [keyof T, T[keyof T]];\ntype ObjectEntries<T> = ObjectEntry<T>[];\n\ntype Dimensions = {\n  aspectRatio: number;\n  height: number;\n  width: number;\n};\n\ntype Metadata = {\n  dimension: keyof Dimensions;\n  max: number;\n  min: number;\n};\n\ntype Features<T extends IndexSignatureParameter> = Record<T, Metadata>;\n\ntype QueryResults<T extends IndexSignatureParameter> = Record<T, boolean>;\n\ninterface ContainerQuerySignature<T extends IndexSignatureParameter> {\n  Args: {\n    Named: {\n      dataAttributePrefix?: string;\n      debounce?: number;\n      features?: Features<T>;\n      onQuery?: ({\n        dimensions,\n        queryResults,\n      }: {\n        dimensions: Dimensions;\n        queryResults: QueryResults<T>;\n      }) => void;\n    };\n    Positional: [];\n  };\n  Element: Element;\n}\n\nexport default class ContainerQuery<\n  T extends IndexSignatureParameter,\n> extends Modifier<ContainerQuerySignature<T>> {\n  private _dataAttributes: string[] = [];\n  private _element?: Element;\n  private _named!: NamedArgs<ContainerQuerySignature<T>>;\n  private _resizeObserver = resizeObserver(this);\n\n  dimensions!: Dimensions;\n  queryResults!: QueryResults<T>;\n\n  get dataAttributePrefix(): string {\n    return this._named.dataAttributePrefix ?? 'container-query';\n  }\n\n  get debounce(): number {\n    return this._named.debounce ?? 0;\n  }\n\n  get features(): Features<T> {\n    return this._named.features ?? ({} as Features<T>);\n  }\n\n  constructor(owner: Owner, args: ArgsFor<ContainerQuerySignature<T>>) {\n    super(owner, args);\n\n    registerDestructor(this, () => {\n      if (this._element) {\n        this._resizeObserver.unobserve(this._element, this.onResize);\n      }\n    });\n  }\n\n  private evaluateQueries(): void {\n    const queryResults = {} as QueryResults<T>;\n\n    for (const [featureName, metadata] of Object.entries(\n      this.features,\n    ) as ObjectEntries<Features<T>>) {\n      const { dimension, min, max } = metadata;\n      const value = this.dimensions[dimension];\n\n      queryResults[featureName] = min <= value && value < max;\n    }\n\n    this.queryResults = queryResults;\n  }\n\n  private measureDimensions(element: Element): void {\n    const height = element.clientHeight;\n    const width = element.clientWidth;\n\n    this.dimensions = {\n      aspectRatio: width / height,\n      height,\n      width,\n    };\n  }\n\n  modify(\n    element: Element,\n    _positional: PositionalArgs<ContainerQuerySignature<T>>,\n    named: NamedArgs<ContainerQuerySignature<T>>,\n  ): void {\n    this._named = named;\n\n    this.registerResizeObserver(element);\n    this.queryContainer(element);\n  }\n\n  private queryContainer(element: Element): void {\n    this.measureDimensions(element);\n    this.evaluateQueries();\n    this.resetDataAttributes(element);\n    this.setDataAttributes(element);\n\n    this._named.onQuery?.({\n      dimensions: this.dimensions,\n      queryResults: this.queryResults,\n    });\n  }\n\n  private registerResizeObserver(element: Element): void {\n    if (this._element) {\n      this._resizeObserver.unobserve(this._element, this.onResize);\n    }\n\n    this._element = element;\n    this._resizeObserver.observe(this._element, this.onResize);\n  }\n\n  private resetDataAttributes(element: Element): void {\n    this._dataAttributes.forEach((dataAttribute) => {\n      element.removeAttribute(dataAttribute);\n    });\n\n    this._dataAttributes = [];\n  }\n\n  private setDataAttributes(element: Element): void {\n    const prefix = this.dataAttributePrefix;\n\n    for (const [featureName, meetsFeature] of Object.entries(\n      this.queryResults,\n    ) as ObjectEntries<QueryResults<T>>) {\n      if (!meetsFeature) {\n        continue;\n      }\n\n      const dataAttribute = prefix\n        ? `data-${prefix}-${String(featureName)}`\n        : `data-${String(featureName)}`;\n\n      element.setAttribute(dataAttribute, '');\n\n      this._dataAttributes.push(dataAttribute);\n    }\n  }\n\n  @action private onResize(resizeObserverEntry: ResizeObserverEntry): void {\n    const element = resizeObserverEntry.target;\n\n    if (this.debounce > 0) {\n      // eslint-disable-next-line ember/no-runloop\n      _debounce(this, this.queryContainer, element, this.debounce);\n      return;\n    }\n\n    this.queryContainer(element);\n  }\n}\n\nexport type {\n  Dimensions,\n  Features,\n  IndexSignatureParameter,\n  Metadata,\n  QueryResults,\n};\n"],"names":["ContainerQuery","Modifier","_dataAttributes","_element","_named","_resizeObserver","resizeObserver","dimensions","queryResults","dataAttributePrefix","debounce","features","constructor","owner","args","registerDestructor","unobserve","onResize","evaluateQueries","featureName","metadata","Object","entries","dimension","min","max","value","measureDimensions","element","height","clientHeight","width","clientWidth","aspectRatio","modify","_positional","named","registerResizeObserver","queryContainer","resetDataAttributes","setDataAttributes","onQuery","observe","forEach","dataAttribute","removeAttribute","prefix","meetsFeature","String","setAttribute","push","resizeObserverEntry","target","_debounce","n","prototype","action"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-container-query",
-  "version": "6.1.3",
+  "version": "6.1.5",
   "description": "Make container queries that harness the power of Ember",
   "keywords": [
     "container-queries",
@@ -16,7 +16,8 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/ijlee2/ember-container-query.git"
+    "url": "https://github.com/ijlee2/ember-container-query.git",
+    "directory": "packages/ember-container-query"
   },
   "license": "MIT",
   "author": "Isaac J. Lee",
@@ -52,30 +53,30 @@
     "decorator-transforms": "^2.3.0",
     "ember-element-helper": "^0.8.8",
     "ember-modifier": "^4.2.2",
-    "ember-primitives": "^0.47.1"
+    "ember-primitives": "^0.48.2"
   },
   "devDependencies": {
     "@babel/core": "^7.28.5",
     "@babel/plugin-transform-typescript": "^7.28.5",
     "@babel/runtime": "^7.28.4",
-    "@embroider/addon-dev": "^8.1.0",
+    "@embroider/addon-dev": "^8.2.0",
     "@glimmer/component": "^2.0.0",
     "@glimmer/tracking": "^1.1.2",
     "@glint/ember-tsc": "^1.0.8",
     "@glint/template": "^1.7.3",
     "@glint/tsserver-plugin": "^2.0.8",
-    "@ijlee2-frontend-configs/ember-template-lint": "^2.3.0",
-    "@ijlee2-frontend-configs/eslint-config-ember": "^2.4.0",
-    "@ijlee2-frontend-configs/prettier": "^2.3.0",
+    "@ijlee2-frontend-configs/ember-template-lint": "^2.3.2",
+    "@ijlee2-frontend-configs/eslint-config-ember": "^2.5.0",
+    "@ijlee2-frontend-configs/prettier": "^2.3.3",
     "@rollup/plugin-babel": "^6.1.0",
     "@tsconfig/ember": "^3.0.12",
     "babel-plugin-ember-template-compilation": "^3.0.1",
     "concurrently": "^9.2.1",
-    "ember-source": "^6.8.2",
+    "ember-source": "^6.9.0",
     "ember-template-lint": "^7.9.3",
-    "eslint": "^9.39.1",
+    "eslint": "^9.39.2",
     "prettier": "^3.7.4",
-    "rollup": "^4.53.3",
+    "rollup": "^4.54.0",
     "typescript": "^5.9.3"
   },
   "engines": {