@pg-labs-incubator/cobweb 0.0.0-stage → 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +163 -0
- package/README.md +82 -2
- package/package.json +111 -3
- package/src/action/action.yaml +291 -0
- package/src/action/button-group.yaml +56 -0
- package/src/action/button.yaml +239 -0
- package/src/action/split-button.yaml +87 -0
- package/src/color/color.yaml +181 -0
- package/src/color/palette.yaml +147 -0
- package/src/container/card.yaml +170 -0
- package/src/container/corner-radius.yaml +50 -0
- package/src/container/elevation.yaml +19 -0
- package/src/design.yaml +41 -0
- package/src/feedback/feedback.yaml +225 -0
- package/src/icon/icon-font.yaml +28 -0
- package/src/icon/icon.yaml +31 -0
- package/src/input/date-picker.yaml +144 -0
- package/src/input/date-range-input.yaml +162 -0
- package/src/input/range-slider.yaml +161 -0
- package/src/input/select.yaml +230 -0
- package/src/input/slider.yaml +172 -0
- package/src/input/text-field.yaml +240 -0
- package/src/input/time-picker.yaml +220 -0
- package/src/motion/motion.yaml +371 -0
- package/src/navigation/app-bar.yaml +147 -0
- package/src/navigation/navigation.yaml +339 -0
- package/src/navigation/scroll.yaml +23 -0
- package/src/navigation/search.yaml +112 -0
- package/src/navigation/tabs.yaml +144 -0
- package/src/navigation/toolbar.yaml +130 -0
- package/src/selection/checkbox.yaml +162 -0
- package/src/selection/chip.yaml +219 -0
- package/src/selection/radio.yaml +125 -0
- package/src/selection/segmented-group.yaml +11 -0
- package/src/selection/segmented.yaml +69 -0
- package/src/selection/switch.yaml +209 -0
- package/src/spacing/measurement.yaml +80 -0
- package/src/state/state.yaml +38 -0
- package/src/surface/surface.yaml +483 -0
- package/src/text/line-height.yaml +144 -0
- package/src/text/typeface.yaml +31 -0
- package/src/text/typescale.yaml +726 -0
- package/target/esbuild/action/action.css +1 -0
- package/target/esbuild/action/base.jsx +1 -0
- package/target/esbuild/action/button.jsx +17 -0
- package/target/esbuild/action/fab-menu-context.jsx +1 -0
- package/target/esbuild/action/fab-menu.jsx +15 -0
- package/target/esbuild/action/fab.jsx +7 -0
- package/target/esbuild/action/group.jsx +22 -0
- package/target/esbuild/action/icon-button.jsx +5 -0
- package/target/esbuild/action/index.jsx +1 -0
- package/target/esbuild/action/split-button.jsx +12 -0
- package/target/esbuild/color/contrast.jsx +1 -0
- package/target/esbuild/color/dynamic.jsx +1 -0
- package/target/esbuild/color/hct.jsx +1 -0
- package/target/esbuild/color/index.css +1 -0
- package/target/esbuild/color/index.jsx +1 -0
- package/target/esbuild/color/palette.jsx +1 -0
- package/target/esbuild/color/scheme.jsx +1 -0
- package/target/esbuild/color/temperature.jsx +1 -0
- package/target/esbuild/container/card.css +1 -0
- package/target/esbuild/container/card.jsx +1 -0
- package/target/esbuild/container/elevation-shadow.css +1 -0
- package/target/esbuild/container/elevation-shadow.jsx +1 -0
- package/target/esbuild/container/index.jsx +1 -0
- package/target/esbuild/dom/client.jsx +1 -0
- package/target/esbuild/dom/index.jsx +1 -0
- package/target/esbuild/dom/server.jsx +1 -0
- package/target/esbuild/dom/types.jsx +1 -0
- package/target/esbuild/feedback/badge.jsx +15 -0
- package/target/esbuild/feedback/feedback.css +1 -0
- package/target/esbuild/feedback/focus.jsx +1 -0
- package/target/esbuild/feedback/index.jsx +1 -0
- package/target/esbuild/feedback/loading.jsx +7 -0
- package/target/esbuild/feedback/observe.jsx +1 -0
- package/target/esbuild/feedback/progress.jsx +35 -0
- package/target/esbuild/feedback/snackbar.jsx +23 -0
- package/target/esbuild/feedback/tooltip.jsx +24 -0
- package/target/esbuild/icon/icon.css +1 -0
- package/target/esbuild/icon/icon.jsx +1 -0
- package/target/esbuild/icon/index.jsx +1 -0
- package/target/esbuild/index.css +1 -0
- package/target/esbuild/index.jsx +1 -0
- package/target/esbuild/input/autocomplete.jsx +5 -0
- package/target/esbuild/input/base.jsx +4 -0
- package/target/esbuild/input/date-picker.css +1 -0
- package/target/esbuild/input/date-picker.jsx +104 -0
- package/target/esbuild/input/date-range-input.css +1 -0
- package/target/esbuild/input/date-time.jsx +21 -0
- package/target/esbuild/input/index.css +1 -0
- package/target/esbuild/input/index.jsx +1 -0
- package/target/esbuild/input/paired-input.jsx +1 -0
- package/target/esbuild/input/picker-dialog.css +1 -0
- package/target/esbuild/input/picker-dialog.jsx +14 -0
- package/target/esbuild/input/select.css +1 -0
- package/target/esbuild/input/select.jsx +63 -0
- package/target/esbuild/input/slider.css +1 -0
- package/target/esbuild/input/slider.jsx +51 -0
- package/target/esbuild/input/text-field.css +1 -0
- package/target/esbuild/input/text-field.jsx +67 -0
- package/target/esbuild/input/time-picker.css +1 -0
- package/target/esbuild/input/time-picker.jsx +29 -0
- package/target/esbuild/motion/frame.jsx +1 -0
- package/target/esbuild/motion/index.css +1 -0
- package/target/esbuild/motion/index.jsx +1 -0
- package/target/esbuild/motion/material.jsx +1 -0
- package/target/esbuild/motion/motion.jsx +1 -0
- package/target/esbuild/motion/spring.jsx +1 -0
- package/target/esbuild/motion/transition.css +1 -0
- package/target/esbuild/motion/transition.jsx +1 -0
- package/target/esbuild/motion/velocity.jsx +1 -0
- package/target/esbuild/navigation/app-bar.jsx +51 -0
- package/target/esbuild/navigation/base.jsx +1 -0
- package/target/esbuild/navigation/drawer.jsx +25 -0
- package/target/esbuild/navigation/index.jsx +1 -0
- package/target/esbuild/navigation/navigation.css +1 -0
- package/target/esbuild/navigation/navigation.jsx +29 -0
- package/target/esbuild/navigation/scroll.jsx +1 -0
- package/target/esbuild/navigation/search.jsx +29 -0
- package/target/esbuild/navigation/tabs.jsx +7 -0
- package/target/esbuild/navigation/toolbar.jsx +23 -0
- package/target/esbuild/selection/base.jsx +1 -0
- package/target/esbuild/selection/checkbox.jsx +14 -0
- package/target/esbuild/selection/chip.jsx +23 -0
- package/target/esbuild/selection/index.jsx +1 -0
- package/target/esbuild/selection/radio.jsx +9 -0
- package/target/esbuild/selection/segmented.jsx +15 -0
- package/target/esbuild/selection/selection.css +1 -0
- package/target/esbuild/selection/switch.jsx +14 -0
- package/target/esbuild/shape/corner-rounding.jsx +1 -0
- package/target/esbuild/shape/cubic.jsx +1 -0
- package/target/esbuild/shape/index.jsx +1 -0
- package/target/esbuild/shape/material-shapes.jsx +1 -0
- package/target/esbuild/shape/morph.jsx +1 -0
- package/target/esbuild/shape/path.jsx +1 -0
- package/target/esbuild/shape/point.jsx +1 -0
- package/target/esbuild/shape/rounded-polygon.jsx +1 -0
- package/target/esbuild/shape/shapes.jsx +1 -0
- package/target/esbuild/spacing/index.jsx +1 -0
- package/target/esbuild/state/component.css +1 -0
- package/target/esbuild/state/component.jsx +1 -0
- package/target/esbuild/state/controller.jsx +1 -0
- package/target/esbuild/state/index.jsx +1 -0
- package/target/esbuild/state/ripple.jsx +1 -0
- package/target/esbuild/state/state.jsx +1 -0
- package/target/esbuild/state/style.jsx +1 -0
- package/target/esbuild/surface/carousel-layout.jsx +1 -0
- package/target/esbuild/surface/carousel.css +1 -0
- package/target/esbuild/surface/carousel.jsx +10 -0
- package/target/esbuild/surface/dialog.jsx +35 -0
- package/target/esbuild/surface/divider.jsx +1 -0
- package/target/esbuild/surface/drag.jsx +1 -0
- package/target/esbuild/surface/gestures.css +1 -0
- package/target/esbuild/surface/gestures.jsx +7 -0
- package/target/esbuild/surface/index.css +1 -0
- package/target/esbuild/surface/index.jsx +1 -0
- package/target/esbuild/surface/interactive.jsx +1 -0
- package/target/esbuild/surface/list-patterns.jsx +26 -0
- package/target/esbuild/surface/list.css +1 -0
- package/target/esbuild/surface/list.jsx +9 -0
- package/target/esbuild/surface/menu.css +1 -0
- package/target/esbuild/surface/menu.jsx +12 -0
- package/target/esbuild/surface/scaffold.jsx +47 -0
- package/target/esbuild/surface/sheet.jsx +21 -0
- package/target/esbuild/surface/side-sheet.jsx +17 -0
- package/target/esbuild/surface/slots.jsx +1 -0
- package/target/esbuild/surface/surface.css +1 -0
- package/target/esbuild/surface/surface.jsx +1 -0
- package/target/esbuild/text/index.css +1 -0
- package/target/esbuild/text/index.jsx +1 -0
- package/target/esbuild/text/text.css +1 -0
- package/target/esbuild/text/text.jsx +3 -0
- package/target/esbuild/text/typography.css +1 -0
- package/target/esbuild/text/typography.jsx +1 -0
- package/target/esbuild/util/box-side.jsx +1 -0
- package/target/esbuild/util/debug.jsx +1 -0
- package/target/esbuild/util/dom.jsx +1 -0
- package/target/esbuild/util/event.jsx +1 -0
- package/target/esbuild/util/index.jsx +1 -0
- package/target/esbuild/util/preconditions.jsx +1 -0
- package/target/esbuild/util/reactive.jsx +1 -0
- package/target/tsc/action/action.css.d.ts +3 -0
- package/target/tsc/action/base.d.ts +211 -0
- package/target/tsc/action/button.d.ts +126 -0
- package/target/tsc/action/fab-menu-context.d.ts +16 -0
- package/target/tsc/action/fab-menu.d.ts +112 -0
- package/target/tsc/action/fab.d.ts +98 -0
- package/target/tsc/action/group.d.ts +166 -0
- package/target/tsc/action/icon-button.d.ts +79 -0
- package/target/tsc/action/index.d.ts +24 -0
- package/target/tsc/action/split-button.d.ts +78 -0
- package/target/tsc/color/contrast.d.ts +48 -0
- package/target/tsc/color/dynamic.d.ts +203 -0
- package/target/tsc/color/hct.d.ts +114 -0
- package/target/tsc/color/index.css.d.ts +3 -0
- package/target/tsc/color/index.d.ts +23 -0
- package/target/tsc/color/palette.d.ts +30 -0
- package/target/tsc/color/scheme.d.ts +446 -0
- package/target/tsc/color/temperature.d.ts +24 -0
- package/target/tsc/container/card.css.d.ts +3 -0
- package/target/tsc/container/card.d.ts +110 -0
- package/target/tsc/container/elevation-shadow.css.d.ts +3 -0
- package/target/tsc/container/elevation-shadow.d.ts +23 -0
- package/target/tsc/container/index.d.ts +44 -0
- package/target/tsc/dom/client.d.ts +387 -0
- package/target/tsc/dom/index.d.ts +93 -0
- package/target/tsc/dom/server.d.ts +65 -0
- package/target/tsc/dom/types.d.ts +134 -0
- package/target/tsc/feedback/badge.d.ts +116 -0
- package/target/tsc/feedback/feedback.css.d.ts +3 -0
- package/target/tsc/feedback/focus.d.ts +20 -0
- package/target/tsc/feedback/index.d.ts +17 -0
- package/target/tsc/feedback/loading.d.ts +194 -0
- package/target/tsc/feedback/observe.d.ts +75 -0
- package/target/tsc/feedback/progress.d.ts +281 -0
- package/target/tsc/feedback/snackbar.d.ts +398 -0
- package/target/tsc/feedback/tooltip.d.ts +326 -0
- package/target/tsc/icon/icon.css.d.ts +3 -0
- package/target/tsc/icon/icon.d.ts +69 -0
- package/target/tsc/icon/index.d.ts +13 -0
- package/target/tsc/index.css.d.ts +3 -0
- package/target/tsc/index.d.ts +7 -0
- package/target/tsc/input/autocomplete.d.ts +119 -0
- package/target/tsc/input/base.d.ts +282 -0
- package/target/tsc/input/date-picker.css.d.ts +3 -0
- package/target/tsc/input/date-picker.d.ts +351 -0
- package/target/tsc/input/date-range-input.css.d.ts +3 -0
- package/target/tsc/input/date-time.d.ts +171 -0
- package/target/tsc/input/index.css.d.ts +3 -0
- package/target/tsc/input/index.d.ts +27 -0
- package/target/tsc/input/paired-input.d.ts +435 -0
- package/target/tsc/input/picker-dialog.css.d.ts +3 -0
- package/target/tsc/input/picker-dialog.d.ts +84 -0
- package/target/tsc/input/select.css.d.ts +3 -0
- package/target/tsc/input/select.d.ts +267 -0
- package/target/tsc/input/slider.css.d.ts +3 -0
- package/target/tsc/input/slider.d.ts +372 -0
- package/target/tsc/input/text-field.css.d.ts +3 -0
- package/target/tsc/input/text-field.d.ts +415 -0
- package/target/tsc/input/time-picker.css.d.ts +3 -0
- package/target/tsc/input/time-picker.d.ts +212 -0
- package/target/tsc/motion/frame.d.ts +36 -0
- package/target/tsc/motion/index.css.d.ts +3 -0
- package/target/tsc/motion/index.d.ts +34 -0
- package/target/tsc/motion/material.d.ts +110 -0
- package/target/tsc/motion/motion.d.ts +235 -0
- package/target/tsc/motion/spring.d.ts +223 -0
- package/target/tsc/motion/transition.css.d.ts +3 -0
- package/target/tsc/motion/transition.d.ts +597 -0
- package/target/tsc/motion/velocity.d.ts +54 -0
- package/target/tsc/navigation/app-bar.d.ts +473 -0
- package/target/tsc/navigation/base.d.ts +320 -0
- package/target/tsc/navigation/drawer.d.ts +301 -0
- package/target/tsc/navigation/index.d.ts +25 -0
- package/target/tsc/navigation/navigation.css.d.ts +3 -0
- package/target/tsc/navigation/navigation.d.ts +537 -0
- package/target/tsc/navigation/scroll.d.ts +218 -0
- package/target/tsc/navigation/search.d.ts +332 -0
- package/target/tsc/navigation/tabs.d.ts +497 -0
- package/target/tsc/navigation/toolbar.d.ts +248 -0
- package/target/tsc/selection/base.d.ts +100 -0
- package/target/tsc/selection/checkbox.d.ts +194 -0
- package/target/tsc/selection/chip.d.ts +358 -0
- package/target/tsc/selection/index.d.ts +21 -0
- package/target/tsc/selection/radio.d.ts +198 -0
- package/target/tsc/selection/segmented.d.ts +333 -0
- package/target/tsc/selection/selection.css.d.ts +3 -0
- package/target/tsc/selection/switch.d.ts +165 -0
- package/target/tsc/shape/corner-rounding.d.ts +36 -0
- package/target/tsc/shape/cubic.d.ts +215 -0
- package/target/tsc/shape/index.d.ts +35 -0
- package/target/tsc/shape/material-shapes.d.ts +176 -0
- package/target/tsc/shape/morph.d.ts +91 -0
- package/target/tsc/shape/path.d.ts +177 -0
- package/target/tsc/shape/point.d.ts +165 -0
- package/target/tsc/shape/rounded-polygon.d.ts +289 -0
- package/target/tsc/shape/shapes.d.ts +76 -0
- package/target/tsc/spacing/index.d.ts +19 -0
- package/target/tsc/state/component.css.d.ts +3 -0
- package/target/tsc/state/component.d.ts +276 -0
- package/target/tsc/state/controller.d.ts +257 -0
- package/target/tsc/state/index.d.ts +19 -0
- package/target/tsc/state/ripple.d.ts +50 -0
- package/target/tsc/state/state.d.ts +129 -0
- package/target/tsc/state/style.d.ts +22 -0
- package/target/tsc/surface/carousel-layout.d.ts +212 -0
- package/target/tsc/surface/carousel.css.d.ts +3 -0
- package/target/tsc/surface/carousel.d.ts +231 -0
- package/target/tsc/surface/dialog.d.ts +580 -0
- package/target/tsc/surface/divider.d.ts +92 -0
- package/target/tsc/surface/drag.d.ts +92 -0
- package/target/tsc/surface/gestures.css.d.ts +3 -0
- package/target/tsc/surface/gestures.d.ts +292 -0
- package/target/tsc/surface/index.css.d.ts +3 -0
- package/target/tsc/surface/index.d.ts +29 -0
- package/target/tsc/surface/interactive.d.ts +22 -0
- package/target/tsc/surface/list-patterns.d.ts +384 -0
- package/target/tsc/surface/list.css.d.ts +3 -0
- package/target/tsc/surface/list.d.ts +340 -0
- package/target/tsc/surface/menu.css.d.ts +3 -0
- package/target/tsc/surface/menu.d.ts +590 -0
- package/target/tsc/surface/scaffold.d.ts +337 -0
- package/target/tsc/surface/sheet.d.ts +384 -0
- package/target/tsc/surface/side-sheet.d.ts +183 -0
- package/target/tsc/surface/slots.d.ts +21 -0
- package/target/tsc/surface/surface.css.d.ts +3 -0
- package/target/tsc/surface/surface.d.ts +192 -0
- package/target/tsc/text/index.css.d.ts +3 -0
- package/target/tsc/text/index.d.ts +18 -0
- package/target/tsc/text/text.css.d.ts +3 -0
- package/target/tsc/text/text.d.ts +94 -0
- package/target/tsc/text/typography.css.d.ts +3 -0
- package/target/tsc/text/typography.d.ts +82 -0
- package/target/tsc/util/box-side.d.ts +76 -0
- package/target/tsc/util/debug.d.ts +20 -0
- package/target/tsc/util/dom.d.ts +35 -0
- package/target/tsc/util/event.d.ts +93 -0
- package/target/tsc/util/index.d.ts +12 -0
- package/target/tsc/util/preconditions.d.ts +79 -0
- package/target/tsc/util/reactive.d.ts +36 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{VelocityTracker as l}from"../motion";const u=125,m=8e3,b=40;function i(t,e,n){let r=e,o=1/0;for(const a of t){const s=n===!1?e-a:a-e,c=n===void 0?Math.abs(s):s<0?1/0:s;c<=o&&(r=a,o=c)}return r}function E(t,e,n,r){if(n===0)return i(t,e);const o=n>0;if(Math.abs(n)>=u)return i(t,e,o);const a=i(t,e,!1),s=i(t,e,!0);return Math.abs((o?a:s)-e)>=r===o?s:a}function d(t){const e=typeof t.getCoalescedEvents=="function"?t.getCoalescedEvents():[];return e.length>0?e:[t]}class p{#e;#t;constructor(){this.#e=new l,this.#t=0}reset(){this.#e.resetTracking()}track(e,n){for(const r of d(e))this.#e.addDataPoint(r.timeStamp,n(r));this.#t=e.timeStamp}release(e){return e.timeStamp-this.#t>b?0:this.#e.calculateVelocity(m)}}export{p as DragVelocity,u as FLING_VELOCITY_THRESHOLD,m as MAX_FLING_VELOCITY,b as POINTER_STOPPED_MSEC,i as closestAnchorOf,d as coalescedEventsOf,E as settleTargetOf};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer cw-style{.cw-SwipeToDismiss{isolation:isolate;min-inline-size:0;overflow:hidden;position:relative;touch-action:pan-y}._cw-SwipeToDismiss-vertical{touch-action:pan-x}.cw-SwipeToDismiss-dragging{user-select:none}.cw-SwipeToDismiss-background{inset:0;position:absolute;z-index:0}.cw-SwipeToDismiss-content{position:relative;transform:translate(var(--cw-swipe-offset, 0px));z-index:1}._cw-SwipeToDismiss-vertical>.cw-SwipeToDismiss-content{transform:translateY(var(--cw-swipe-offset, 0px))}.cw-SwipeToDismiss-dismissed>.cw-SwipeToDismiss-content{pointer-events:none}.cw-PullToRefresh{min-block-size:100%;overflow:auto;overscroll-behavior-block:contain;position:relative}.cw-PullToRefresh-at-start{touch-action:pan-y}.cw-PullToRefresh-dragging{user-select:none}.cw-PullToRefresh:focus-visible{outline-color:cw-var(--cw-Color-secondary-fill);outline-offset:cw-var(--cw-State-focusIndicator-innerOffset);outline-style:solid;outline-width:cw-var(--cw-State-focusIndicator-thickness)}.cw-PullToRefresh>.cw-PullToRefresh-indicator{--cw-elevationShadow-level: cw-var(--cw-Elevation-level-0);align-items:center;background-color:cw-var(--cw-Color-surface-containerHigh);block-size:40px;border-radius:cw-var(--cw-CornerRadius-full);box-sizing:border-box;color:cw-var(--cw-Color-surface-onFillVariant);display:flex;inline-size:40px;inset-block-start:0;justify-content:center;margin-block-end:-40px;margin-inline:auto;pointer-events:none;position:sticky;transform:translateY(-40px);transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration),cw-var(--cw-Motion-spring-spatial-fast-duration);transition-property:--cw-elevationShadow-level,transform;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing),cw-var(--cw-Motion-spring-spatial-fast-easing);z-index:1}.cw-PullToRefresh:is(.cw-PullToRefresh-dragging,.cw-PullToRefresh-refreshing)>.cw-PullToRefresh-indicator{--cw-elevationShadow-level: cw-var(--cw-Elevation-level-2)}.cw-PullToRefresh-refreshing>.cw-PullToRefresh-indicator{transform:translateY(40px)}.cw-PullToRefresh-dragging>.cw-PullToRefresh-indicator{transition:none}.cw-PullToRefresh-content{min-block-size:100%}}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import{createSignal as u,onCleanup as f,untrack as h}from"solid-js";import{defineDomComponent as c}from"..";import{ELEVATION_SHADOW_CSS_CLASS as v}from"../container/elevation-shadow";import{DomController as p}from"../dom/client";import{CircularProgressIndicator as E}from"../feedback/progress";import{applySpringMotion as y,subscribeMotionFrames as g}from"../motion";import{DragVelocity as T,settleTargetOf as P}from"./drag";import"../container/elevation-shadow.css";import"./gestures.css";import{Carousel as $,CarouselController as G,CarouselItem as j,CarouselSlide as B}from"./carousel";const l=8,S=56,w=.05,d="--cw-swipe-offset",D=160,L=24,C=80,R=40,I=2,M="a[href], area[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), summary, [contenteditable]:not([contenteditable=false]), [tabindex]:not([tabindex='-1'])";function x(n){return n!==null&&typeof n=="object"&&n.nodeType===1&&n.matches("input, textarea, select, [contenteditable]:not([contenteditable=false])")}function m(n,e){return<div{...n}classList={{...n.classList,"cw-SwipeToDismiss":!0,"cw-SwipeToDismiss-disabled":e.disabled===!0,[`_cw-SwipeToDismiss-${e.axis??"horizontal"}`]:!0}}data-cw-swipe-axis={e.axis??"horizontal"}>
|
|
2
|
+
<div aria-hidden="true"class="cw-SwipeToDismiss-background"inert>{e.background}</div>
|
|
3
|
+
<div class="cw-SwipeToDismiss-content">{n.children}</div>
|
|
4
|
+
</div>}class O extends p{#t;#u;#a;#h;#p;#i;#b;#e;#n;#o;#s;#m;#f;#d;#l;constructor(e){super(e,{styleElementIsFunction:!0}),this.#t=null,this.#u=null,this.#a=h(()=>e.axis??"horizontal"),this.#h=void 0,this.#p=!1,this.#i=0,this.#b=0,this.#e=0,this.#n=0,this.#o=new T,this.#s=void 0,this.#m=0,this.#f=void 0,this.#d=void 0,this.#l=!1,f(()=>{this.#w(),this.#y(),this.#R(this.#t,!1)})}offset(){return this.#s?.value??this.#e}dismiss(e){this.#C(e??(this.#a==="horizontal"?"start":"up"))}reset(){this.#w(),this.#y(),this.#l=!1,this.#e=0,this.#t?.classList.remove("cw-SwipeToDismiss-dismissed"),this.#t?.removeAttribute("aria-hidden"),this.#T(void 0),this.#u!==null&&(this.#u.inert=!1)}#r=(e,t=!1)=>this.#a==="horizontal"!==t?e.clientX:e.clientY;#v(e){const t=e.getBoundingClientRect();return this.#a==="horizontal"?t.width:t.height}#T(e){e===void 0?this.#u?.style.removeProperty(d):this.#u?.style.setProperty(d,`${e}px`)}#L(){const e=this.#t;return e?.ownerDocument.defaultView?.getComputedStyle(e).direction==="rtl"}#P(e){return this.#a==="vertical"?e<0?"up":"down":e<0!==this.#L()?"start":"end"}#E(e,t,i){const s=this.#u,o=s?.ownerDocument.defaultView,a=this.#s?.playState==="running"?this.#s:void 0;if(s===null)return;if(this.#m=e,this.#f=i,a!==void 0){a.retarget(e);return}const r=y(s,d,this.#e,e,{role:"spatial",speed:"default",unit:"px",velocity:t});this.#s=r,o!=null&&r.playState==="running"&&this.props.onOffsetChange!==void 0&&(this.#d=g(o,this.#S)),r.finished.then(()=>this.#I(r),()=>{})}#S=()=>{const e=this.#s;e!==void 0&&h(()=>this.props.onOffsetChange?.(e.value))};#I(e){const t=this.#m,i=this.#f;e===this.#s&&(this.#d?.(),this.#d=void 0,this.#s=void 0,this.#f=void 0,this.#e=t,h(()=>this.props.onOffsetChange?.(t)),t!==0&&this.#M(this.#P(t),i))}#w(){const e=this.#s;this.#d?.(),this.#d=void 0,this.#s=void 0,this.#f=void 0,e!==void 0&&(e.cancel(),this.#e=e.value)}#C(e,t){const i=this.#t,s=this.#L();if(i===null||this.#l||this.props.disabled===!0)return;const o=e==="up"||e==="start"&&!s||e==="end"&&s;this.#y(),this.#n=this.#v(i),this.#E(o?-this.#n:this.#n,0,t)}#M(e,t){const i=this.#t,s=this.#u;i===null||s===null||(this.#l=!0,this.#D(),i.classList.add("cw-SwipeToDismiss-dismissed"),i.setAttribute("aria-hidden","true"),s.inert=!0,h(()=>this.props.onDismiss?.(e,t)))}#D(){const e=this.#t,t=e?.ownerDocument,i=t?.activeElement;if(e===null||t===void 0||i==null||!e.contains(i))return;const s=Array.from(t.querySelectorAll(M)).filter(r=>!e.contains(r)&&r.closest("[inert]")===null&&r.checkVisibility({visibilityProperty:!0})),o=s.findIndex(r=>(e.compareDocumentPosition(r)&Node.DOCUMENT_POSITION_FOLLOWING)!==0),a=o<0?s[s.length-1]:s[o];a===void 0?i.blur():a.focus()}#c(e){try{this.#t?.setPointerCapture(e)}catch{return this.#g(),!1}return this.#p=!0,this.#t?.classList.add("cw-SwipeToDismiss-dragging"),!0}#y(){const e=this.#h;if(this.#h=void 0,e!==void 0&&this.#p)try{this.#t?.releasePointerCapture(e)}catch{}this.#p=!1,this.#t?.classList.remove("cw-SwipeToDismiss-dragging")}#g(){this.#l||(this.#w(),this.#y(),this.#e=0,this.#T(void 0))}#H=e=>{const t=this.#t,i=this.#s?.playState==="running";t===null||this.props.disabled===!0||this.#l||this.#h!==void 0||!e.isPrimary||e.pointerType==="mouse"&&e.button!==0||(this.#w(),this.#h=e.pointerId,this.#n=this.#v(t),this.#i=this.#r(e)-this.#e,this.#b=this.#r(e,!0),this.#o.reset(),this.#o.track(e,this.#r),i&&this.#c(e.pointerId))};#x=e=>{if(this.#h!==e.pointerId)return;const t=this.#r(e)-this.#i;if(this.#o.track(e,this.#r),!this.#p){const i=this.#r(e,!0)-this.#b;if(Math.abs(i)>l&&Math.abs(i)>Math.abs(t)){this.#g();return}if(Math.abs(t)<=l||!this.#c(e.pointerId))return}this.#e=Math.max(-this.#n,Math.min(this.#n,t)),this.#T(this.#e),h(()=>this.props.onOffsetChange?.(this.#e,e))};#O(e,t){const i=this.props.threshold,s=this.#n,a=i!==void 0&&Number.isFinite(i)?Math.min(1,Math.max(w,i))*s:Math.min(S,s);if(this.#h!==e.pointerId)return;if(!this.#p){this.#h=void 0;return}const r=t?0:this.#o.release(e);this.#y(),t?this.#E(0,r):this.#E(P([-s,0,s],this.#e,r,a),r,e)}#_=e=>this.#O(e,!1);#A=e=>this.#O(e,!0);#X=e=>{!this.#p&&this.#h===e.pointerId&&(this.#h=void 0)};#k=e=>{e.key!=="Delete"||e.defaultPrevented||e.repeat||x(e.target)||this.props.disabled===!0||this.#l||(e.preventDefault(),this.#C(this.#a==="horizontal"?"start":"up",e))};#R(e,t){const i=t?"addEventListener":"removeEventListener";e?.[i]("pointerdown",this.#H),e?.[i]("pointermove",this.#x),e?.[i]("pointerup",this.#_),e?.[i]("pointercancel",this.#A),e?.[i]("lostpointercapture",this.#A),e?.[i]("pointerleave",this.#X),e?.[i]("keydown",this.#k)}applyComponentProps(){const e=super.readProps(["axis","disabled"]);e.axisChanged&&(this.#g(),this.#a=e.axis??"horizontal",super.setClass("axis",`_cw-SwipeToDismiss-${this.#a}`),super.setAttribute("data-cw-swipe-axis",this.#a)),e.disabledChanged&&(e.disabled===!0&&this.#g(),super.setClass("cw-SwipeToDismiss-disabled",e.disabled===!0))}onStyleElementChanged(e){this.#g(),this.#R(this.#t,!1),super.onStyleElementChanged(e),this.#t=e,this.#u=e?.querySelector(":scope > .cw-SwipeToDismiss-content")??null,this.#R(this.#t,!0)}render(e){const t=this.props;return h(()=>m({children:e},{axis:t.axis,get background(){return t.background},disabled:t.disabled}))}}const V=c(()=>m,()=>O);function A(n,e){return<E attr:aria-hidden="true"indeterminate={e()}size={24}strokeWidth={2.5}value={Math.min(1,n())}/>}function b(n,e,t,i){const s=("refreshing"in e?e.refreshing:e.defaultRefreshing)===!0;return<div{...n}aria-busy={s?"true":"false"}aria-disabled={e.disabled===!0?"true":void 0}aria-keyshortcuts="Enter"aria-label={n["aria-label"]??e.label??"Pull to refresh"}classList={{...n.classList,"cw-PullToRefresh":!0,"cw-PullToRefresh-at-start":!0,"cw-PullToRefresh-disabled":e.disabled===!0,"cw-PullToRefresh-refreshing":s}}data-cw-pull-to-refresh="true"role="region"tabIndex={e.tabIndex??0}>
|
|
5
|
+
<div class={`cw-PullToRefresh-indicator ${v}`}>{e.indicator??A(t??(()=>s?1:0),i??(()=>s))}</div>
|
|
6
|
+
<div class="cw-PullToRefresh-content">{n.children}</div>
|
|
7
|
+
</div>}class H extends p{#t;#u;#a;#h;#p;#i;#b;#e;#n;#o;#s;#m;#f;#d;#l;#r;#v;constructor(e){super(e,{styleElementIsFunction:!0}),this.#t="refreshing"in e,this.#e=h(()=>(this.#t?e.refreshing:e.defaultRefreshing)===!0);const[t,i]=u(this.#e?1:0),[s,o]=u(this.#e);this.#u=t,this.#a=i,this.#h=s,this.#p=o,this.#i=null,this.#b=null,this.#n=void 0,this.#o=void 0,this.#s=!1,this.#m=0,this.#f=0,this.#d=0,this.#l=0,this.#r=!1,this.#v=!1,f(()=>{this.#l++,this.#r=!1,this.#c(),this.#F(this.#i,!1)})}complete(e){!this.#t&&this.#e&&this.#P(!1,e)}#T(){const e=this.props.threshold;return e===void 0||!Number.isFinite(e)?D:Math.max(L,e)}#L(e){const t=this.#b;if(this.#a(e??(this.#e?1:0)),t===null)return;if(e===void 0){t.style.removeProperty("transform");return}const i=Math.min(I,Math.max(0,e-1)),s=Math.min(1,e)+i-i*i/4;t.style.transform=`translateY(${s*C-R}px)`}#P(e,t,i=!0){this.#e=e,this.#p(e),this.#a(e?1:0),super.setClass("cw-PullToRefresh-refreshing",e),super.setAttribute("aria-busy",e?"true":"false"),i&&this.#E(e,t)}#E(e,t){h(()=>this.props.onRefreshingChange?.(e,t))}#S(e,t){e===this.#l&&(this.#r=!1,this.#t?this.#e&&this.#v&&this.#E(!1,t):this.#P(!1),this.#v=!1)}#I(e){if(this.props.disabled===!0||this.#e||this.#r)return;const t=++this.#l;let i;this.#r=!0,this.#t?this.#E(!0,e):this.#P(!0,e);try{i=h(()=>this.props.onRefresh?.(e))}catch(s){throw this.#S(t,e),s}i instanceof Promise?i.then(()=>this.#S(t,e),()=>this.#S(t,e)):queueMicrotask(()=>this.#S(t,e))}#w(){return this.#b?.getAnimations().some(e=>"transitionProperty"in e&&e.transitionProperty==="transform"&&e.playState==="running")===!0}#C(){return this.props.disabled!==!0&&!this.#e&&!this.#r&&this.#n===void 0&&this.#o===void 0&&this.#i!==null&&this.#i.scrollTop<=0&&!this.#w()}#M(e,t,i){const s=t-this.#m,o=e-this.#f;if(!this.#s){const a=Math.abs(o);if(s<-l||a>l&&a>Math.abs(s))return this.#c(),!1;if(s<=l)return!1;if(!i())return this.#c(),!1;this.#s=!0,this.#i?.classList.add("cw-PullToRefresh-dragging")}return this.#d=Math.max(0,s),this.#L(this.#d/this.#T()),!0}#D(e,t){const i=this.#d,s=this.#s;this.#c(),s&&!t&&i>=this.#T()&&this.#I(e)}#c(){const e=this.#n;if(e!==void 0&&this.#s)try{this.#i?.releasePointerCapture(e)}catch{}this.#n=void 0,this.#o=void 0,this.#s=!1,this.#d=0,this.#i?.classList.remove("cw-PullToRefresh-dragging"),this.#L(void 0)}#y=e=>{e.pointerType==="touch"||!e.isPrimary||e.button!==0||!this.#C()||(this.#n=e.pointerId,this.#m=e.clientY,this.#f=e.clientX)};#g=e=>{const t=this.#i;e.pointerId!==this.#n||t===null||this.#M(e.clientX,e.clientY,()=>{try{return t.setPointerCapture(e.pointerId),!0}catch{return!1}})};#H=e=>{e.pointerId===this.#n&&this.#D(e,!1)};#x=e=>{e.pointerId===this.#n&&this.#D(e,!0)};#O=e=>{!this.#s&&e.pointerId===this.#n&&this.#c()};#_(e){return Array.from(e.touches).find(t=>t.identifier===this.#o)??Array.from(e.changedTouches).find(t=>t.identifier===this.#o)}#A=e=>{const t=e.touches[0];e.touches.length!==1||t===void 0||!this.#C()||(this.#o=t.identifier,this.#m=t.clientY,this.#f=t.clientX)};#X=e=>{const t=this.#o===void 0?void 0:this.#_(e);if(t===void 0||this.#i===null)return;const i=t.clientY-this.#m,s=t.clientX-this.#f;i>0&&i>=Math.abs(s)&&e.cancelable&&e.preventDefault(),this.#M(t.clientX,t.clientY,()=>!0)&&e.cancelable&&e.preventDefault()};#k=e=>{Array.from(e.changedTouches).some(t=>t.identifier===this.#o)&&this.#D(e,!1)};#R=e=>{Array.from(e.changedTouches).some(t=>t.identifier===this.#o)&&this.#D(e,!0)};#z=e=>{e.key!=="Enter"||e.defaultPrevented||e.repeat||e.target!==this.#i||this.props.disabled===!0||this.#e||this.#r||(e.preventDefault(),this.#I(e))};#N=()=>{this.#i?.classList.toggle("cw-PullToRefresh-at-start",this.#i.scrollTop<=0)};#F(e,t){const i=t?"addEventListener":"removeEventListener";e?.[i]("scroll",this.#N,{passive:!0}),e?.[i]("pointerdown",this.#y),e?.[i]("pointermove",this.#g),e?.[i]("pointerup",this.#H),e?.[i]("pointercancel",this.#x),e?.[i]("lostpointercapture",this.#x),e?.[i]("pointerleave",this.#O),e?.[i]("touchstart",this.#A,{passive:!0}),e?.[i]("touchmove",this.#X,{passive:!1}),e?.[i]("touchend",this.#k),e?.[i]("touchcancel",this.#R),e?.[i]("keydown",this.#z)}applyComponentProps(){const e=super.readProps(["disabled","label","refreshing","tabIndex","attr:aria-label"]),t=e["attr:aria-label"]??e.label??"Pull to refresh";if(super.styleElement?.getAttribute("aria-label")!==t&&super.setAttribute("aria-label",t),e.tabIndexChanged&&super.setAttribute("tabindex",e.tabIndex??0),e.disabledChanged&&(e.disabled===!0&&this.#c(),super.setAttribute("aria-disabled",e.disabled===!0?"true":void 0),super.setClass("cw-PullToRefresh-disabled",e.disabled===!0)),!this.#t||!e.refreshingChanged)return;const i=e.refreshing===!0;this.#P(i,void 0,!1),i&&this.#c(),this.#r&&(i?this.#v=!0:(this.#r=!1,this.#v=!1,this.#l++))}onStyleElementChanged(e){this.#c(),this.#F(this.#i,!1),super.onStyleElementChanged(e),this.#i=e,this.#b=e?.querySelector(":scope > .cw-PullToRefresh-indicator")??null,this.#F(this.#i,!0),this.#N()}render(e){const t=this.props;return h(()=>b({children:e},{defaultRefreshing:this.#e,disabled:t.disabled,get indicator(){return t.indicator},label:t["attr:aria-label"]??t.label,tabIndex:t.tabIndex},this.#u,this.#h))}}const q=c(()=>b,()=>H);export{$ as Carousel,G as CarouselController,j as CarouselItem,B as CarouselSlide,q as PullToRefresh,H as PullToRefreshController,V as SwipeToDismiss,O as SwipeToDismissController};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import"./surface.css";@import"./list.css";@import"./menu.css";@import"./carousel.css";@import"./gestures.css";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import"./surface.css";import{Surface as t,SurfaceController as l}from"./surface";import{Divider as i,DividerController as p}from"./divider";import{List as n,ListController as m,ListItem as f,ListItemController as d}from"./list";import{ExpandedListItem as u,ExpandedListItemController as P,RevealListItem as C,RevealListItemController as x,ReorderableList as c,ReorderableListController as M,ReorderHandle as h}from"./list-patterns";import{AlertDialog as L,AlertDialogController as D,Dialog as g,DialogController as R,FullScreenDialog as B,FullScreenDialogController as y}from"./dialog";import{Menu as w,MenuCheckboxItem as v,MenuCheckboxItemController as T,MenuController as A,MenuGroup as E,MenuGroupController as F,MenuItem as H,MenuItemController as k,MenuRadioItem as z,MenuRadioItemController as G,SubMenu as O}from"./menu";import{BottomSheet as j,BottomSheetController as q,ModalBottomSheet as J,ModalBottomSheetController as K}from"./sheet";import{BottomSheetScaffold as Q,ListDetailPaneScaffold as U,ListDetailPaneScaffoldController as V,Scaffold as X,ScaffoldController as Y,SupportingPaneScaffold as Z,SupportingPaneScaffoldController as _,createWindowSizeClass as $,windowSizeClassOf as ee}from"./scaffold";import{ModalSideSheet as re,SideSheetController as te,StandardSideSheet as le}from"./side-sheet";import{Carousel as ie,CarouselController as pe,CarouselItem as ae,CarouselSlide as ne}from"./carousel";import{PullToRefresh as fe,PullToRefreshController as de,SwipeToDismiss as Se,SwipeToDismissController as ue}from"./gestures";export{L as AlertDialog,D as AlertDialogController,j as BottomSheet,q as BottomSheetController,Q as BottomSheetScaffold,ie as Carousel,pe as CarouselController,ae as CarouselItem,ne as CarouselSlide,g as Dialog,R as DialogController,i as Divider,p as DividerController,u as ExpandedListItem,P as ExpandedListItemController,B as FullScreenDialog,y as FullScreenDialogController,n as List,m as ListController,U as ListDetailPaneScaffold,V as ListDetailPaneScaffoldController,f as ListItem,d as ListItemController,w as Menu,v as MenuCheckboxItem,T as MenuCheckboxItemController,A as MenuController,E as MenuGroup,F as MenuGroupController,H as MenuItem,k as MenuItemController,z as MenuRadioItem,G as MenuRadioItemController,J as ModalBottomSheet,K as ModalBottomSheetController,re as ModalSideSheet,fe as PullToRefresh,de as PullToRefreshController,h as ReorderHandle,c as ReorderableList,M as ReorderableListController,C as RevealListItem,x as RevealListItemController,X as Scaffold,Y as ScaffoldController,te as SideSheetController,le as StandardSideSheet,O as SubMenu,Z as SupportingPaneScaffold,_ as SupportingPaneScaffoldController,t as Surface,l as SurfaceController,Se as SwipeToDismiss,ue as SwipeToDismissController,$ as createWindowSizeClass,ee as windowSizeClassOf};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const l="button, a[href], area[href], input, select, textarea, label, summary, audio[controls], video[controls], [contenteditable]:not([contenteditable=false]), [tabindex]:not([tabindex='-1']), [role=button], [role=link], [role=checkbox], [role=radio], [role=switch], [role=slider], [role=scrollbar], [role=spinbutton], [role=textbox], [role=combobox], [role=menuitem], [role=menuitemcheckbox], [role=menuitemradio], [role=tab], [role=option], [role=treeitem], [role=gridcell], [role=listbox], [aria-controls], [aria-haspopup]";function i(e){return e!==null&&typeof e=="object"&&e.nodeType===1}function a(e,r,n){let t=e;if(n!==void 0)for(const o of n){if(o===r)break;if(i(o)&&o.matches(l))return!0}for(;t!==null&&t!==r;){if(t.matches(l))return!0;t=t.parentElement}return!1}export{a as hasNestedInteractive,i as isElementNode};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import{createUniqueId as P,mergeProps as C,onCleanup as L,onMount as J,untrack as l}from"solid-js";import{insert as D}from"solid-js/web";import{defineDomComponent as f}from"..";import{ELEVATION_SHADOW_CSS_CLASS as B}from"../container/elevation-shadow";import{DomController as g}from"../dom/client";import{Icon as R}from"../icon";import{applySpringMotion as T}from"../motion";import{deferAfterDelegatedCancellation as m}from"../util";import{DragVelocity as M,settleTargetOf as _}from"./drag";import{hasNestedInteractive as V,isElementNode as c}from"./interactive";import{ListController as $}from"./list";import{resolveSurfaceSlots as x}from"./slots";import"../container/elevation-shadow.css";import"./surface.css";import"./list.css";const E=8,I="--cw-reveal-progress",N="--cw-reveal-distance",p="--cw-reorder-offset",Y=["ArrowUp","ArrowDown","Home","End","Escape"],q="Use the arrow keys to move, Space to drop, and Escape to cancel.",U="expand_more",z="arrow_forward",F="drag_handle";function H(r,e){const t=l(()=>e.supportingText===void 0);return<li{...r}classList={{...r.classList,"cw-ExpandedListItem":!0}}>
|
|
2
|
+
<details open={("open"in e?e.open:e.defaultOpen)===!0}>
|
|
3
|
+
<summary aria-disabled={e.disabled===!0?"true":void 0}tabIndex={e.disabled===!0?-1:void 0}>
|
|
4
|
+
<span class="cw-ListItem-leading">{e.leading}</span>
|
|
5
|
+
<span class="cw-ListItem-content">
|
|
6
|
+
<span class="cw-ListItem-headline">{e.headline}</span>
|
|
7
|
+
<span class="cw-ListItem-supporting"hidden={t}>{e.supportingText}</span>
|
|
8
|
+
</span>
|
|
9
|
+
<span aria-hidden="true"class="cw-ExpandedListItem-icon"><R name={U}/></span>
|
|
10
|
+
</summary>
|
|
11
|
+
<div class="cw-ExpandedListItem-body">{r.children}</div>
|
|
12
|
+
</details>
|
|
13
|
+
</li>}class K extends g{#t;#i;#s;constructor(e){super(e,{styleElementIsFunction:!0}),this.#t="open"in e,this.#i=null,this.#s=l(()=>(this.#t?e.open:e.defaultOpen)===!0),L(()=>this.#n(this.styleElement,!1))}#e=e=>{const t=this.#i,n=l(()=>this.props.disabled===!0);t===null||t.open===this.#s||(n||l(()=>this.props.onOpenChange?.(t.open,e)),!this.#t&&!n?this.#s=t.open:this.#s=l(()=>this.#t?this.props.open===!0:this.#s),t.open=this.#s)};#r=e=>{e.type==="keydown"&&!["Enter"," "].includes(e.key)||l(()=>this.props.disabled===!0)&&c(e.target)&&e.target.closest("summary")?.parentElement===this.#i&&e.preventDefault()};#n(e,t){const n=t?"addEventListener":"removeEventListener";this.#i?.[n]("toggle",this.#e),e?.[n]("click",this.#r),e?.[n]("keydown",this.#r)}applyComponentProps(){const e=super.readProps(["disabled","open","supportingText"]),t=this.#i?.querySelector(":scope > summary");this.#t&&e.openChanged&&(this.#s=e.open===!0),this.#i!==null&&this.#i.open!==this.#s&&(this.#i.open=this.#s),e.disabledChanged&&e.disabled===!0?(t?.setAttribute("aria-disabled","true"),t?.setAttribute("tabindex","-1")):e.disabledChanged&&(t?.removeAttribute("aria-disabled"),t?.removeAttribute("tabindex")),e.supportingTextChanged&&t?.querySelector(".cw-ListItem-supporting")?.toggleAttribute("hidden",e.supportingText===void 0)}onStyleElementChanged(e){this.#n(super.styleElement,!1),super.onStyleElementChanged(e),this.#i=e?.querySelector(":scope > details")??null,this.#n(e,!0)}render(e){const t=this.props;return l(()=>H({children:e},{defaultOpen:this.#s,disabled:t.disabled,get headline(){return t.headline},get leading(){return t.leading},get supportingText(){return t.supportingText}}))}}const G=f(()=>H,()=>K),Le=r=>G(x(r,["children","headline","leading","supportingText"]));function A(r,e,t){const n=("expanded"in e?e.expanded:e.defaultExpanded)===!0,s=l(()=>e.supportingText===void 0),i=e.hideLabel??"Hide actions",o=e.revealLabel??"Show actions";return<li{...r}classList={{...r.classList,"cw-RevealListItem":!0,"cw-RevealListItem-expanded":n}}>
|
|
14
|
+
<div class="cw-RevealListItem-row">
|
|
15
|
+
<span class="cw-ListItem-leading">{e.leading}</span>
|
|
16
|
+
<span class="cw-ListItem-content">
|
|
17
|
+
<span class="cw-ListItem-headline">{e.headline??r.children}</span>
|
|
18
|
+
<span class="cw-ListItem-supporting"hidden={s}>{e.supportingText}</span>
|
|
19
|
+
</span>
|
|
20
|
+
<button aria-controls={t}aria-expanded={n?"true":"false"}aria-label={n?i:o}class="cw-RevealListItem-toggle"disabled={e.disabled===!0}type="button"><R autoMirror name={z}/></button>
|
|
21
|
+
</div>
|
|
22
|
+
<div aria-hidden={n?void 0:"true"}class="cw-RevealListItem-actions"id={t}inert={!n}>{e.actions}</div>
|
|
23
|
+
</li>}class W extends g{#t;#i;#s;#e;#r;#n;#l;#d;#u;#o;#p;#L;#v;#b;#a;#m;#w;constructor(e){super(e,{styleElementIsFunction:!0}),this.#t=`cw-reveal-${P()}`,this.#i="expanded"in e,this.#s=new M,this.#e=l(()=>(this.#i?e.expanded:e.defaultExpanded)===!0),this.#r=null,this.#n=null,this.#l=0,this.#d=this.#e?1:0,this.#u=0,this.#o=void 0,this.#p=!1,this.#L=0,this.#v=0,this.#b=!1,this.#a=void 0,this.#m=void 0,this.#w=!1,J(()=>this.#M()),L(()=>{this.#w=!0,this.#c(),this.#a?.cancel(),this.#m?.disconnect(),this.#g(this.styleElement,!1)})}#E(e,t,n=0){!this.#w&&e!==this.#e&&l(()=>this.props.disabled!==!0)&&(l(()=>this.props.onExpandedChange?.(e,t)),this.#i||(this.#e=e),this.#y()),this.#f(n)}#y(){const e=this.#r,t=this.#n,n=this.#e,s=l(()=>this.props.hideLabel??"Hide actions"),i=l(()=>this.props.revealLabel??"Show actions");super.setClass("cw-RevealListItem-expanded",n),e?.setAttribute("aria-expanded",n?"true":"false"),e?.setAttribute("aria-label",n?s:i),t!==null&&(!n&&t.contains(t.ownerDocument.activeElement)&&e?.focus(),t.inert=!n,t.toggleAttribute("aria-hidden",!n))}#R(e){this.#d=e,super.setStyle(I,`${e}`)}#f(e){const t=this.styleElement,n=this.#e?1:0,s=this.#a?.playState==="running"?this.#a:void 0;if(t===null)return;if(s!==void 0){s.retarget(n);return}if(this.#d===n&&e===0){this.#R(n);return}const i=T(t,I,this.#d,n,{role:"spatial",speed:"default",velocity:e});this.#a=i,super.setClass("cw-RevealListItem-settling",!0),i.finished.then(()=>{i===this.#a&&(this.#a=void 0,this.#d=i.value,super.setClass("cw-RevealListItem-settling",!1))},()=>{})}#x(){const e=this.#a;this.#a=void 0,e!==void 0&&(e.cancel(),this.#d=e.value,super.setClass("cw-RevealListItem-settling",!1))}#c(){const e=this.#o;if(this.#o=void 0,e!==void 0&&this.#p)try{this.styleElement?.releasePointerCapture(e)}catch{}this.#p=!1,super.setClass("cw-RevealListItem-dragging",!1)}#h=e=>{e.defaultPrevented||!c(e.target)||e.target.closest(".cw-RevealListItem-toggle")!==this.#r||m(e,this.styleElement,()=>this.#E(!this.#e,e),!1)};#P=e=>{e.key==="Escape"&&this.#e&&m(e,this.styleElement,()=>this.#E(!1,e))};#C=e=>{const t=this.styleElement;t===null||l(()=>this.props.disabled===!0)||this.#o!==void 0||!e.isPrimary||e.button!==0||!c(e.target)||V(e.target,t,e.composedPath())||(this.#x(),this.#o=e.pointerId,this.#L=e.clientX,this.#v=e.clientY,this.#u=this.#d,this.#b=t.ownerDocument.defaultView?.getComputedStyle(t).direction==="rtl",this.#s.reset(),this.#s.track(e,this.#I))};#I=e=>this.#b?e.clientX:-e.clientX;#D=e=>{const t=this.styleElement,n=(e.clientX-this.#L)*(this.#b?1:-1);if(!(this.#o!==e.pointerId||t===null)){if(this.#s.track(e,this.#I),!this.#p){if(Math.abs(e.clientY-this.#v)>Math.max(E,Math.abs(n))){this.#c(),this.#f(0);return}if(Math.abs(n)<E||this.#l===0)return;try{t.setPointerCapture(e.pointerId)}catch{this.#c(),this.#f(0);return}this.#p=!0,super.setClass("cw-RevealListItem-dragging",!0)}this.#R(Math.max(0,Math.min(1,this.#u+n/this.#l)))}};#T=e=>{const t=this.#l,n=this.#p,s=this.#s.release(e);if(this.#o===e.pointerId){if(this.#c(),!n){this.#f(0);return}this.#E(_([0,t],this.#d*t,s,t/2)>0,e,s/t)}};#S=e=>{this.#o===e.pointerId&&(this.#c(),this.#f(0))};#g(e,t){const n=t?"addEventListener":"removeEventListener";e?.[n]("click",this.#h),e?.[n]("keydown",this.#P),e?.[n]("pointerdown",this.#C),e?.[n]("pointermove",this.#D),e?.[n]("pointerup",this.#T),e?.[n]("pointercancel",this.#S),e?.[n]("lostpointercapture",this.#S)}#M(){const e=this.#n,t=e?.isConnected===!0?e.ownerDocument.defaultView:null;this.#m?.disconnect(),this.#m=void 0,!(e===null||t==null)&&(this.#m=new t.ResizeObserver(()=>{this.#l=e.offsetWidth,super.setStyle(N,`${this.#l}px`)}),this.#m.observe(e))}applyComponentProps(){const e=super.readProps(["disabled","expanded","hideLabel","revealLabel","supportingText"]);e.disabledChanged&&(e.disabled===!0&&this.#o!==void 0&&(this.#c(),this.#f(0)),this.#r!==null&&(this.#r.disabled=e.disabled===!0)),e.supportingTextChanged&&this.styleElement?.querySelector(".cw-RevealListItem-row .cw-ListItem-supporting")?.toggleAttribute("hidden",e.supportingText===void 0),this.#i&&e.expandedChanged&&this.#e!==(e.expanded===!0)?(this.#e=e.expanded===!0,this.#y(),this.#o===void 0&&this.#f(0)):(e.hideLabelChanged||e.revealLabelChanged)&&this.#y()}onStyleElementChanged(e){this.#c(),this.#x(),this.#g(super.styleElement,!1),super.onStyleElementChanged(e),this.#r=e?.querySelector(".cw-RevealListItem-toggle")??null,this.#n=e?.querySelector(":scope > .cw-RevealListItem-actions")??null,this.#g(e,!0),this.#M(),this.#n!==null&&(this.#n.id===""&&(this.#n.id=this.#t),this.#r?.setAttribute("aria-controls",this.#n.id),this.#y())}render(e){const t=this.props;return l(()=>A({children:e},{get actions(){return t.actions},defaultExpanded:this.#e,disabled:t.disabled,get headline(){return t.headline},hideLabel:t.hideLabel,get leading(){return t.leading},revealLabel:t.revealLabel,get supportingText(){return t.supportingText}},this.#t))}}const j=f(()=>(r,e)=>A(r,e,`cw-reveal-${P()}`),()=>W),ge=r=>j(x(r,["actions","children","headline","leading","supportingText"]));function k(r){let e=r;for(;typeof e=="function";)e=e();return e??<R name={F}/>}function Z(r,e){return<button{...r}aria-keyshortcuts="Space ArrowUp ArrowDown Home End Escape"aria-label={r["aria-label"]??e.label??"Reorder item"}aria-pressed="false"classList={{...r.classList,"cw-ReorderHandle":!0}}data-cw-reorder-handle="true"disabled={e.disabled===!0}type="button">{k(r.children)}</button>}class Q extends g{constructor(e){super(e,{styleElementIsFunction:!0})}applyComponentProps(){const e=super.readProps(["disabled","label","attr:aria-label"]),t=e["attr:aria-label"]??e.label??"Reorder item";e.disabledChanged&&super.setAttribute("disabled",e.disabled===!0),this.styleElement?.getAttribute("aria-label")!==t&&super.setAttribute("aria-label",t)}render(e){const t=<button aria-keyshortcuts="Space ArrowUp ArrowDown Home End Escape"aria-pressed="false"class="cw-ReorderHandle"data-cw-reorder-handle="true"type="button"/>;return D(t,()=>k(e)),t}}const ve=f(()=>Z,()=>Q);function ee(r,e){return<>
|
|
24
|
+
<div aria-atomic="true"aria-live="polite"class="cw-ReorderableList-status"role="status"/>
|
|
25
|
+
<ul{...r}aria-disabled={e.disabled===!0?"true":void 0}classList={{...r.classList,"cw-List":!0,"cw-ReorderableList":!0}}data-cw-list-selection-mode="none"data-cw-list-variant={e.variant??"standard"}role="list">{r.children}</ul>
|
|
26
|
+
</>}class te extends ${#t;#i;#s;#e;#r;#n;#l;#d;#u;#o;#p;constructor(e){const t=C(e,{selectionMode:"none"});super(t),this.#t=l(()=>e),this.#i=new M,this.#s=null,this.#e=void 0,this.#r=void 0,this.#n=void 0,this.#l=null,this.#d=0,this.#u=void 0,this.#o=void 0,this.#p=!1,L(()=>{this.#p=!0,this.#h(),this.#o?.cancel(),this.#g(this.styleElement,!1)})}#L(){return Array.from(this.styleElement?.children??[]).filter(e=>e.hasAttribute("data-cw-list-value"))}#v(e){return this.#L().find(t=>t.dataset.cwListValue===e)}#b(e){const n=(c(e)?e:null)?.closest("[data-cw-reorder-handle]")??null,s=n?.closest("[data-cw-list-value]");if(!(n===null||n.disabled||s?.parentElement!==this.styleElement))return s.dataset.cwListValue}#a(e,t=!1){const n=this.#e,s=this.#t.values;if(n===void 0||this.#s===null)return;const i=s.indexOf(n)+1;this.#s.textContent=l(()=>this.#t.announcement?.(n,i,s.length,e,t))??(t?"Cancelled. Restored the original order.":e?`${n}, position ${i} of ${s.length}. ${q}`:`${n}, dropped at position ${i} of ${s.length}.`)}#m(e,t,n){const s=this.#t.values,i=s.indexOf(e),o=Math.max(0,Math.min(s.length-1,t)),a=s.slice();return this.#p||i<0||i===o||new Set(s).size!==s.length?!1:(a.splice(i,1),a.splice(o,0,e),l(()=>this.#t.onReorder(a,n)),!0)}#w(e){this.#h(),this.#e=e,this.#r=this.#t.values.slice(),this.#E(),this.#a(!0)}#E(){for(const e of this.#L()){const t=e.dataset.cwListValue===this.#e;e.classList.toggle("cw-ReorderableList-moving",t),e.classList.toggle(B,t),e.querySelector("[data-cw-reorder-handle]")?.setAttribute("aria-pressed",t?"true":"false")}}#y(e){const t=this.styleElement,n=this.#L(),s=n.indexOf(e),i=t.ownerDocument.defaultView,o=Number.parseFloat(i?.getComputedStyle(t).rowGap??"")||0,a=t.getBoundingClientRect().top,u=n.map(d=>d.getBoundingClientRect()),h=u[s],O=n.filter(d=>d!==e),S=u.filter((d,X)=>X!==s),b={row:e,from:s,others:O,centers:S.map(d=>d.top+d.height/2),extents:S.map(d=>d.height+o),extent:h.height+o,center:h.top+h.height/2,start:h.top-a,size:h.height,pointerStart:this.#d,insertion:s,offset:0};return t.classList.add("cw-ReorderableList-dragging"),t.style.setProperty("--cw-reorder-shift",`${b.extent}px`),this.#R(b),b}#R(e){const t=this.styleElement;let n=e.start;for(let s=e.from;s<e.insertion;s++)n+=e.extents[s];for(let s=e.insertion;s<e.from;s++)n-=e.extents[s];t?.style.setProperty("--cw-reorder-slot-start",`${n}px`),t?.style.setProperty("--cw-reorder-slot-size",`${e.size}px`)}#f(e,t){const n=e.center+t-e.pointerStart,s=e.insertion;let i=0;for(;i<e.centers.length&&e.centers[i]<n;)i++;if(e.offset=t-e.pointerStart,e.row.style.setProperty(p,`${e.offset}px`),i!==s){e.insertion=i;for(let o=Math.min(s,i);o<Math.max(s,i);o++){const a=e.others[o],u=o>=e.from&&o<i,h=o<e.from&&o>=i;a.classList.toggle("cw-ReorderableList-shiftedUp",u),a.classList.toggle("cw-ReorderableList-shiftedDown",h)}this.#R(e)}}#x(e){const t=this.styleElement;t?.classList.remove("cw-ReorderableList-dragging");for(const n of e.others)n.classList.remove("cw-ReorderableList-shiftedUp","cw-ReorderableList-shiftedDown");t?.style.removeProperty("--cw-reorder-shift"),t?.style.removeProperty("--cw-reorder-slot-start"),t?.style.removeProperty("--cw-reorder-slot-size")}#c(e,t,n){const s=Number.parseFloat(e.style.getPropertyValue(p))||0,i=t-(e.getBoundingClientRect().top-s);this.#o?.cancel(),e.classList.add("cw-ReorderableList-settling"),e.style.setProperty(p,`${i}px`);const o=T(e,p,i,0,{role:"spatial",speed:"fast",unit:"px",velocity:n});this.#o=o,o.finished.then(()=>{e.classList.remove("cw-ReorderableList-settling"),e.style.removeProperty(p)},()=>{e.classList.remove("cw-ReorderableList-settling"),e.style.removeProperty(p)})}#h(){const e=this.#n,t=this.#u;if(this.#n=void 0,e!==void 0&&t!==void 0)try{this.#l?.releasePointerCapture(e)}catch{}t!==void 0&&this.#x(t),this.#u=void 0,this.#e=void 0,this.#r=void 0,this.#l=null,this.#E()}#P=e=>{const t=this.#b(e.target);e.defaultPrevented||t===void 0||this.#t.disabled===!0||m(e,this.styleElement,()=>{if(!(this.#p||this.#t.disabled===!0)){if(this.#e!==t){this.#w(t);return}this.#a(!1),this.#h()}},!1)};#C=e=>{const t=this.#e;this.#t.disabled===!0||t===void 0||this.#b(e.target)!==t||!Y.includes(e.key)||m(e,this.styleElement,()=>{const n=this.#t.values,s=n.indexOf(t);if(this.#e===t){if(e.key==="Escape"){this.#r!==void 0&&l(()=>this.#t.onReorder(this.#r,e)),this.#a(!1,!0),this.#h();return}this.#m(t,e.key==="Home"?0:e.key==="End"?n.length-1:s+(e.key==="ArrowDown"?1:-1),e),queueMicrotask(()=>{this.#v(t)?.querySelector("[data-cw-reorder-handle]")?.focus(),this.#E(),this.#a(this.#e===t)})}})};#I=e=>{const t=this.#b(e.target);this.#t.disabled===!0||this.#n!==void 0||!e.isPrimary||e.button!==0||t===void 0||!c(e.target)||(this.#e!==t&&(this.#h(),this.#e=t),this.#n=e.pointerId,this.#l=e.target.closest("[data-cw-reorder-handle]"),this.#d=e.clientY,this.#i.reset(),this.#i.track(e,n=>n.clientY))};#D=e=>{const t=this.#e,n=t===void 0?void 0:this.#v(t);if(!(e.pointerId!==this.#n||this.#l===null||n===void 0)){if(this.#i.track(e,s=>s.clientY),this.#u===void 0){if(Math.abs(e.clientY-this.#d)<E)return;try{this.#l.setPointerCapture(e.pointerId)}catch{this.#h();return}this.#o?.cancel(),this.#E(),this.#u=this.#y(n)}this.#f(this.#u,e.clientY)}};#T=e=>{const t=this.#u,n=this.#e,s=this.#l,i=u=>{u.preventDefault(),u.stopImmediatePropagation()};if(e.pointerId!==this.#n)return;if(t===void 0||n===void 0){this.#n=void 0,this.#l=null,t===void 0&&this.#r===void 0&&(this.#e=void 0);return}const o=t.row.getBoundingClientRect().top,a=this.#i.release(e);this.#x(t),this.#u=void 0,this.#m(n,t.insertion,e),this.#a(!1),this.#h(),this.#c(t.row,o,a),s?.addEventListener("click",i,{capture:!0,once:!0}),s?.ownerDocument.defaultView?.setTimeout(()=>s.removeEventListener("click",i,!0),0)};#S=e=>{const t=this.#u;if(e.pointerId!==this.#n)return;if(t===void 0){this.#h();return}const n=t.row.getBoundingClientRect().top;this.#h(),this.#c(t.row,n,0)};#g(e,t){const n=t?"addEventListener":"removeEventListener";e?.[n]("click",this.#P),e?.[n]("keydown",this.#C),e?.[n]("pointerdown",this.#I),e?.[n]("pointermove",this.#D),e?.[n]("pointerup",this.#T),e?.[n]("pointercancel",this.#S),e?.[n]("lostpointercapture",this.#S)}applyComponentProps(){const e=this.#t.disabled===!0,t=this.#t.values;super.applyComponentProps(),super.setClass("cw-ReorderableList",!0),super.setAttribute("aria-disabled",e?"true":void 0),(e||this.#e!==void 0&&!t.includes(this.#e))&&l(()=>this.#h())}onStyleElementChanged(e){this.#h(),this.#g(super.styleElement,!1),super.onStyleElementChanged(e),this.#g(e,!0)}render(e){const t=<div aria-atomic="true"aria-live="polite"class="cw-ReorderableList-status"role="status"/>,n=<ul class="cw-List cw-ReorderableList"data-cw-list-selection-mode="none"role="list"/>;return this.#s=t,D(n,e),[t,n]}}const ne=f(()=>ee,()=>te),ye=r=>{const e=C({variant:"standard"},x(r,["children"]));return ne(e)};export{Le as ExpandedListItem,K as ExpandedListItemController,ve as ReorderHandle,ye as ReorderableList,te as ReorderableListController,ge as RevealListItem,W as RevealListItemController};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer cw-style{.cw-List{box-sizing:border-box;display:flex;flex-flow:column nowrap;list-style:none;margin:0;min-inline-size:0;padding-block:cw-var(--cw-Measurement-space100);padding-inline:0}.cw-List[data-cw-list-variant=segmented]{gap:cw-var(--cw-Measurement-space25)}.cw-ListItem{--cw-Surface-listItemAvatarColor: cw-var(--cw-Surface-listItemAvatarColor, default);--cw-Surface-listItemAvatarLabelColor: cw-var(--cw-Surface-listItemAvatarLabelColor, default);--cw-Surface-listItemColor: cw-var(--cw-Surface-listItemColor, default);--cw-Surface-listItemDisabledOpacity: cw-var(--cw-Surface-listItemDisabledOpacity, default);--cw-Surface-listItemDraggedColor: cw-var(--cw-Surface-listItemDraggedColor, default);--cw-Surface-listItemDraggedContentColor: cw-var(--cw-Surface-listItemDraggedContentColor, default);--cw-Surface-listItemDraggedElevation: cw-var(--cw-Surface-listItemDraggedElevation, default);--cw-Surface-listItemExpressiveSelectedColor: cw-var(--cw-Surface-listItemExpressiveSelectedColor, default);--cw-Surface-listItemExpressiveSelectedContentColor: cw-var(--cw-Surface-listItemExpressiveSelectedContentColor, default);--cw-Surface-listItemLabelColor: cw-var(--cw-Surface-listItemLabelColor, default);--cw-Surface-listItemSegmentedColor: cw-var(--cw-Surface-listItemSegmentedColor, default);--cw-Surface-listItemSelectedColor: cw-var(--cw-Surface-listItemSelectedColor, default);--cw-Surface-listItemSelectedContentColor: cw-var(--cw-Surface-listItemSelectedContentColor, default);--cw-Surface-listItemShape: cw-var(--cw-Surface-listItemShape, default);--cw-Surface-listItemSupportingColor: cw-var(--cw-Surface-listItemSupportingColor, default);--cw-Surface-listItemThreeLineHeight: cw-var(--cw-Surface-listItemThreeLineHeight, default);--cw-Surface-listItemTwoLineHeight: cw-var(--cw-Surface-listItemTwoLineHeight, default);--cw-interactable-focusIndicator-color: cw-var(--cw-Color-secondary-fill);--cw-interactable-focusIndicator-offset: cw-var(--cw-State-focusIndicator-innerOffset);--cw-interactable-focusIndicator-thickness: cw-var(--cw-State-focusIndicator-thickness);--cw-list-item-avatar-color: cw-var(--cw-Surface-listItemAvatarColor);--cw-list-item-avatar-label-color: cw-var(--cw-Surface-listItemAvatarLabelColor);--cw-list-item-color: transparent;--cw-list-item-content-color: cw-var(--cw-Surface-listItemLabelColor);--cw-list-item-disabled-opacity: cw-var(--cw-Surface-listItemDisabledOpacity);--cw-list-item-icon-size: cw-var(--cw-Measurement-space300);--cw-list-item-shape: cw-var(--cw-Surface-listItemShape);--cw-list-item-transform-duration: 0s;--cw-list-item-variant-color: cw-var(--cw-Surface-listItemSupportingColor);-cw-typescale:--cw-Typescale-body-large;align-items:center;background-color:var(--cw-list-item-color);border-radius:var(--cw-list-item-shape);box-sizing:border-box;color:var(--cw-list-item-content-color);display:flex;gap:cw-var(--cw-Measurement-space200);min-block-size:cw-var(--cw-Surface-listItemHeight);min-inline-size:0;padding-block:cw-var(--cw-Measurement-space100);padding-inline:cw-var(--cw-Measurement-space200);position:relative;transition-duration:cw-var(--cw-Motion-spring-spatial-fast-duration),cw-var(--cw-Motion-spring-effect-default-duration),cw-var(--cw-Motion-spring-spatial-fast-duration),cw-var(--cw-Motion-spring-effect-default-duration),var(--cw-list-item-transform-duration);transition-property:--cw-elevationShadow-level,background-color,border-radius,color,transform;transition-timing-function:cw-var(--cw-Motion-spring-spatial-fast-easing),cw-var(--cw-Motion-spring-effect-default-easing),cw-var(--cw-Motion-spring-spatial-fast-easing),cw-var(--cw-Motion-spring-effect-default-easing),cw-var(--cw-Motion-spring-spatial-fast-easing)}.cw-List-dense>._cw-ListItem-lines-1{min-block-size:cw-var(--cw-Surface-listItemHeightDense)}._cw-ListItem-lines-2{min-block-size:cw-var(--cw-Surface-listItemTwoLineHeight)}._cw-ListItem-lines-3{align-items:flex-start;min-block-size:cw-var(--cw-Surface-listItemThreeLineHeight);padding-block:cw-var(--cw-Measurement-space150)}.cw-List:is([data-cw-list-variant=standard],[data-cw-list-variant=segmented])>.cw-ListItem{--cw-list-item-icon-size: cw-var(--cw-Measurement-space250);--cw-list-item-shape: cw-var(--cw-CornerRadius-xsmall);gap:cw-var(--cw-Measurement-space150);padding-block:cw-var(--cw-Measurement-space125)}.cw-List[data-cw-list-variant=standard]>.cw-ListItem{--cw-list-item-color: cw-var(--cw-Surface-listItemColor)}.cw-List[data-cw-list-variant=segmented]>.cw-ListItem{--cw-list-item-color: cw-var(--cw-Surface-listItemSegmentedColor)}.cw-List[data-cw-list-variant=segmented]>.cw-ListItem:first-of-type{border-start-end-radius:cw-var(--cw-CornerRadius-large);border-start-start-radius:cw-var(--cw-CornerRadius-large)}.cw-List[data-cw-list-variant=segmented]>.cw-ListItem:last-of-type{border-end-end-radius:cw-var(--cw-CornerRadius-large);border-end-start-radius:cw-var(--cw-CornerRadius-large)}.cw-List:is([data-cw-list-variant=standard],[data-cw-list-variant=segmented])>.cw-ListItem-hover{border-radius:cw-var(--cw-CornerRadius-medium)}.cw-List:is([data-cw-list-variant=standard],[data-cw-list-variant=segmented])>:is(.cw-ListItem-focus,.cw-ListItem-press,.cw-ListItem-drag,.cw-ListItem-selected){border-radius:cw-var(--cw-CornerRadius-large)}.cw-List:is([data-cw-list-variant=standard],[data-cw-list-variant=segmented])>.cw-ListItem:has(>.cw-ListItem-static-content>.cw-ListItem-action:is(:focus-visible,:active)){border-radius:cw-var(--cw-CornerRadius-large)}.cw-ListItem-selected{--cw-list-item-color: cw-var(--cw-Surface-listItemSelectedColor);--cw-list-item-content-color: cw-var(--cw-Surface-listItemSelectedContentColor);--cw-list-item-variant-color: cw-var(--cw-Surface-listItemSelectedContentColor);border-radius:cw-var(--cw-CornerRadius-large)}.cw-List:is([data-cw-list-variant=standard],[data-cw-list-variant=segmented])>.cw-ListItem-selected{--cw-list-item-color: cw-var(--cw-Surface-listItemExpressiveSelectedColor);--cw-list-item-content-color: cw-var(--cw-Surface-listItemExpressiveSelectedContentColor);--cw-list-item-variant-color: cw-var(--cw-Surface-listItemExpressiveSelectedContentColor)}.cw-ListItem-disabled{--cw-list-item-content-color: cw-scale-opacity( cw-var(--cw-Color-surface-onFill), cw-var(--cw-Surface-listItemDisabledOpacity) );--cw-list-item-variant-color: var(--cw-list-item-content-color);cursor:default;user-select:none}.cw-ListItem-disabled.cw-ListItem-selected{--cw-list-item-color: transparent}.cw-List[data-cw-list-variant=standard]>.cw-ListItem-disabled.cw-ListItem-selected{--cw-list-item-color: cw-var(--cw-Surface-listItemColor)}.cw-List[data-cw-list-variant=segmented]>.cw-ListItem-disabled.cw-ListItem-selected{--cw-list-item-color: cw-var(--cw-Surface-listItemSegmentedColor)}.cw-ListItem-selectable{cursor:pointer}.cw-ListItem-hover{--cw-interactable-stateLayer-color: currentcolor;--cw-interactable-stateLayer-opacity: cw-var(--cw-State-layer-hoverOpacity)}.cw-ListItem-focus{--cw-interactable-stateLayer-color: currentcolor;--cw-interactable-stateLayer-opacity: cw-var(--cw-State-layer-focusOpacity)}.cw-ListItem-press{--cw-interactable-ripple-color: currentcolor;--cw-interactable-ripple-opacity: cw-var(--cw-State-layer-pressOpacity)}.cw-ListItem-drag{--cw-interactable-stateLayer-color: currentcolor;--cw-interactable-stateLayer-opacity: cw-var(--cw-State-layer-dragOpacity)}.cw-ListItem:has(>.cw-ListItem-static-content>.cw-ListItem-action:focus-visible){--cw-interactable-stateLayer-color: currentcolor;--cw-interactable-stateLayer-opacity: cw-var(--cw-State-layer-focusOpacity);outline-color:cw-var(--cw-Color-secondary-fill);outline-offset:cw-var(--cw-State-focusIndicator-innerOffset);outline-style:solid;outline-width:cw-var(--cw-State-focusIndicator-thickness)}.cw-ListItem:has(>.cw-ListItem-static-content>.cw-ListItem-action:active){--cw-interactable-stateLayer-color: currentcolor;--cw-interactable-stateLayer-opacity: cw-var(--cw-State-layer-pressOpacity)}.cw-ListItem-static-content{display:contents}.cw-ListItem-action{all:unset;box-sizing:border-box;color:inherit;cursor:pointer;display:flex;flex:1 1 auto;flex-flow:column nowrap;font:inherit;min-inline-size:0;text-align:inherit}.cw-ListItem-action:disabled{cursor:default}.cw-ListItem-content{display:flex;flex:1 1 auto;flex-flow:column nowrap;min-inline-size:0}.cw-ListItem-headline{overflow-wrap:anywhere}.cw-ListItem-overline{-cw-typescale:--cw-Typescale-label-small;color:var(--cw-list-item-variant-color)}.cw-ListItem-supporting{-cw-typescale:--cw-Typescale-body-medium;color:var(--cw-list-item-variant-color)}.cw-ListItem-leading,.cw-ListItem-trailing{align-items:center;color:var(--cw-list-item-variant-color);display:inline-flex;flex:0 0 auto;justify-content:center}.cw-ListItem-leading:empty,.cw-ListItem-trailing:empty{display:none}.cw-ListItem-trailing{-cw-typescale:--cw-Typescale-label-small}:is(.cw-ListItem-leading,.cw-ListItem-trailing)>.cw-Icon{--cw-Icon-color: currentcolor;--cw-Icon-size: var(--cw-list-item-icon-size)}._cw-ListItem-leading-avatar>.cw-ListItem-static-content>.cw-ListItem-leading{-cw-typescale:--cw-Typescale-title-medium;background-color:var(--cw-list-item-avatar-color);block-size:cw-var(--cw-Measurement-space500);border-radius:50%;color:var(--cw-list-item-avatar-label-color);inline-size:cw-var(--cw-Measurement-space500);overflow:hidden}._cw-ListItem-leading-image>.cw-ListItem-static-content>.cw-ListItem-leading{block-size:cw-var(--cw-Measurement-space700);border-radius:cw-var(--cw-CornerRadius-none);inline-size:cw-var(--cw-Measurement-space700);overflow:hidden}.cw-List:is([data-cw-list-variant=standard],[data-cw-list-variant=segmented])>._cw-ListItem-leading-image>.cw-ListItem-static-content>.cw-ListItem-leading{border-radius:cw-var(--cw-CornerRadius-small)}._cw-ListItem-leading-video>.cw-ListItem-static-content>.cw-ListItem-leading{block-size:cw-var(--cw-Measurement-space700);border-radius:cw-var(--cw-CornerRadius-small);inline-size:100px;overflow:hidden}._cw-ListItem-leading-video._cw-ListItem-lines-3>.cw-ListItem-static-content>.cw-ListItem-leading{block-size:cw-var(--cw-Measurement-space800);inline-size:114px}:is(._cw-ListItem-leading-avatar,._cw-ListItem-leading-image,._cw-ListItem-leading-video)>.cw-ListItem-static-content>.cw-ListItem-leading>:is(img,video){block-size:100%;inline-size:100%;object-fit:cover}.cw-ExpandedListItem,.cw-RevealListItem{--cw-Surface-listItemDisabledOpacity: cw-var(--cw-Surface-listItemDisabledOpacity, default);--cw-list-item-disabled-opacity: cw-var(--cw-Surface-listItemDisabledOpacity);background-color:cw-var(--cw-Color-surface-fill);border-radius:cw-var(--cw-CornerRadius-large);color:cw-var(--cw-Color-surface-onFill);list-style:none;min-inline-size:0}.cw-ExpandedListItem>details>summary,.cw-RevealListItem-row{-cw-typescale:--cw-Typescale-body-large;align-items:center;box-sizing:border-box;display:flex;gap:cw-var(--cw-Measurement-space150);min-block-size:cw-var(--cw-Measurement-space700);padding-block:cw-var(--cw-Measurement-space125);padding-inline:cw-var(--cw-Measurement-space200)}.cw-ExpandedListItem :is(.cw-ListItem-leading,.cw-ListItem-supporting),.cw-RevealListItem :is(.cw-ListItem-leading,.cw-ListItem-supporting){color:cw-var(--cw-Color-surface-onFillVariant)}.cw-ExpandedListItem>details>summary{border-radius:inherit;cursor:pointer;list-style:none}.cw-ExpandedListItem>details>summary::-webkit-details-marker{display:none}.cw-ExpandedListItem>details>summary[aria-disabled=true]{color:cw-scale-opacity(cw-var(--cw-Color-surface-onFill),var(--cw-list-item-disabled-opacity));cursor:default}.cw-ExpandedListItem-icon{align-items:center;background-color:cw-var(--cw-Color-surface-fill);block-size:cw-var(--cw-Measurement-space500);border-radius:cw-var(--cw-CornerRadius-full);color:cw-var(--cw-Color-surface-onFill);display:inline-flex;flex:0 0 auto;inline-size:cw-var(--cw-Measurement-space500);justify-content:center;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:background-color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing)}.cw-ExpandedListItem-icon>.cw-Icon{--cw-Icon-color: currentcolor;--cw-Icon-size: cw-var(--cw-Measurement-space300);transition-duration:cw-var(--cw-Motion-spring-spatial-fast-duration);transition-property:rotate;transition-timing-function:cw-var(--cw-Motion-spring-spatial-fast-easing)}.cw-ExpandedListItem>details[open]>summary .cw-ExpandedListItem-icon{background-color:cw-var(--cw-Color-surface-container)}.cw-ExpandedListItem>details[open]>summary .cw-ExpandedListItem-icon>.cw-Icon{rotate:180deg}.cw-ExpandedListItem-body{padding-block-end:cw-var(--cw-Measurement-space200);padding-inline:cw-var(--cw-Measurement-space200)}.cw-RevealListItem{overflow:hidden;position:relative;touch-action:pan-y}.cw-RevealListItem-row{background-color:inherit;border-radius:inherit;position:relative;transform:translate(calc(var(--cw-reveal-progress, 0) * var(--cw-reveal-distance, 0px) * -1));z-index:1}.cw-RevealListItem-row:dir(rtl){transform:translate(calc(var(--cw-reveal-progress, 0) * var(--cw-reveal-distance, 0px)))}.cw-RevealListItem-expanded{--cw-reveal-progress: 1}.cw-RevealListItem-actions{align-items:center;display:flex;gap:cw-var(--cw-Measurement-space100);inset-block:0;inset-inline-end:0;padding-inline:cw-var(--cw-Measurement-space100);position:absolute;visibility:hidden}:is(.cw-RevealListItem-expanded,.cw-RevealListItem-dragging,.cw-RevealListItem-settling)>.cw-RevealListItem-actions{visibility:visible}.cw-RevealListItem-dragging{user-select:none}.cw-RevealListItem-toggle{align-items:center;background-color:cw-var(--cw-Color-secondary-container);block-size:cw-var(--cw-Measurement-space600);border:0;border-radius:cw-var(--cw-CornerRadius-full);color:cw-var(--cw-Color-secondary-onContainer);cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;inline-size:cw-var(--cw-Measurement-space600);justify-content:center}.cw-RevealListItem-toggle:disabled{cursor:default;opacity:var(--cw-list-item-disabled-opacity)}.cw-RevealListItem-toggle>.cw-Icon{--cw-Icon-color: currentcolor;--cw-Icon-size: cw-var(--cw-Measurement-space300);transition-duration:cw-var(--cw-Motion-spring-spatial-fast-duration);transition-property:rotate;transition-timing-function:cw-var(--cw-Motion-spring-spatial-fast-easing)}.cw-RevealListItem-toggle[aria-expanded=true]>.cw-Icon{rotate:180deg}.cw-RevealListItem-actions>:is(button,a){align-items:center;background-color:cw-var(--cw-Color-primary-fill);border:0;border-radius:cw-var(--cw-CornerRadius-large);color:cw-var(--cw-Color-primary-onFill);display:inline-flex;font:inherit;justify-content:center;min-block-size:cw-var(--cw-Measurement-space600);padding-inline:cw-var(--cw-Measurement-space200);white-space:nowrap}.cw-ReorderableList{--cw-Surface-listItemDropZoneColor: cw-var(--cw-Surface-listItemDropZoneColor, default);isolation:isolate;position:relative}.cw-ReorderableList-dragging:before{--cw-Surface-listItemDropZoneColor: inherit;background-color:cw-var(--cw-Surface-listItemDropZoneColor);block-size:var(--cw-reorder-slot-size, 0px);border-radius:cw-var(--cw-CornerRadius-large);content:"";inset-block-start:var(--cw-reorder-slot-start, 0px);inset-inline:0;pointer-events:none;position:absolute}.cw-ReorderableList-dragging>.cw-ListItem{--cw-list-item-transform-duration: cw-var(--cw-Motion-spring-spatial-fast-duration)}.cw-ReorderableList>.cw-ReorderableList-shiftedUp{transform:translateY(calc(var(--cw-reorder-shift, 0px) * -1))}.cw-ReorderableList>.cw-ReorderableList-shiftedDown{transform:translateY(var(--cw-reorder-shift, 0px))}.cw-ReorderableList>.cw-ListItem.cw-ReorderableList-moving{--cw-elevationShadow-level: cw-var(--cw-Surface-listItemDraggedElevation);--cw-list-item-color: color-mix( in srgb, cw-var(--cw-Surface-listItemDraggedContentColor) calc(100%*cw-var(--cw-State-layer-dragOpacity)) , cw-var(--cw-Surface-listItemDraggedColor) );--cw-list-item-content-color: cw-var(--cw-Surface-listItemDraggedContentColor);--cw-list-item-transform-duration: 0s;--cw-list-item-variant-color: cw-var(--cw-Surface-listItemDraggedContentColor);border-radius:cw-var(--cw-CornerRadius-large);transform:translateY(var(--cw-reorder-offset, 0px));z-index:1}.cw-ReorderableList>.cw-ReorderableList-settling{--cw-list-item-transform-duration: 0s;transform:translateY(var(--cw-reorder-offset, 0px));z-index:1}.cw-ReorderableList-moving .cw-ReorderHandle{cursor:grabbing}.cw-ReorderHandle{align-items:center;background-color:cw-var(--cw-Color-secondary-container);block-size:cw-var(--cw-Measurement-space600);border:0;border-radius:cw-var(--cw-CornerRadius-full);color:cw-var(--cw-Color-secondary-onContainer);cursor:grab;display:inline-flex;flex:0 0 auto;font:inherit;inline-size:cw-var(--cw-Measurement-space600);justify-content:center;touch-action:none}.cw-ReorderHandle:disabled{cursor:default;opacity:var(--cw-list-item-disabled-opacity)}.cw-ReorderHandle>.cw-Icon{--cw-Icon-color: currentcolor;--cw-Icon-size: cw-var(--cw-Measurement-space300)}.cw-ReorderableList-status{block-size:1px;clip-path:inset(50%);inline-size:1px;overflow:hidden;position:absolute;white-space:nowrap}:is(.cw-ExpandedListItem>details>summary,.cw-RevealListItem-toggle,.cw-RevealListItem-actions>:is(button,a),.cw-ReorderHandle):focus-visible{outline-color:cw-var(--cw-Color-secondary-fill);outline-offset:cw-var(--cw-State-focusIndicator-outerOffset);outline-style:solid;outline-width:cw-var(--cw-State-focusIndicator-thickness)}.cw-ExpandedListItem>details>summary:focus-visible{outline-offset:cw-var(--cw-State-focusIndicator-innerOffset)}}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import{createComponent as L,createContext as w,onCleanup as b,onMount as M,untrack as d,useContext as x}from"solid-js";import{insert as V}from"solid-js/web";import{defineDomComponent as E}from"..";import{DomController as A}from"../dom/client";import{FocusState as H,HoverState as k,PressState as D}from"../state";import{InteractableController as P}from"../state/controller";import{deferAfterDelegatedCancellation as p}from"../util";import{hasNestedInteractive as v,isElementNode as m}from"./interactive";import{resolveSurfaceSlots as B}from"./slots";import"./surface.css";import"./list.css";const S={option:!1,selected:!1,valueless:!1,focusStop:!1},J=H|k|D,X=["aria-disabled","class","data-cw-list-value","hidden","inert","style"],O=["hidden","inert"],y=w(),u=new WeakMap;function C(s){return d(()=>{const e=s.overline!==void 0,t=s.supportingContent!==void 0||s.supportingText!==void 0;return s.lines!==void 0?s.lines:e&&t?3:e||t?2:1})}function I(s){return`_cw-ListItem-leading-${s}`}function c(s){if(s.closest("[hidden], [inert]")!==null||s.getClientRects().length===0||s.ownerDocument.defaultView?.getComputedStyle(s).visibility!=="visible")return!1;for(let e=s.closest("fieldset[disabled]");e!==null;e=e.parentElement?.closest("fieldset[disabled]")??null)if(e.querySelector(":scope > legend")?.contains(s)!==!0)return!1;return!0}function R(s,e){return s.option===e.option&&s.selected===e.selected&&s.valueless===e.valueless&&s.focusStop===e.focusStop}function N(s,e){const t=e.selectionMode??"none";return<ul{...s}aria-multiselectable={t==="multiple"?"true":void 0}classList={{...s.classList,"cw-List":!0,"cw-List-dense":e.dense===!0}}data-cw-list-selection-mode={t}data-cw-list-variant={e.variant??"baseline"}role={t==="none"?"list":"listbox"}>{s.children}</ul>}class _ extends A{#s;#d;#e;#l;#n;#r;#t;#i;#u;#o;#c;#a;constructor(e){super(e,{styleElementIsFunction:!0}),this.#s="selectedValue"in e,this.#d="selectedValues"in e,this.#e="none",this.#l=d(()=>"selectedValue"in e?e.selectedValue:e.defaultSelectedValue),this.#n=d(()=>new Set(e.selectedValues??[])),this.#r=d(()=>this.#s||e.defaultSelectedValue!==void 0),this.#t=void 0,this.#i=!1,this.#u=new WeakMap,this.#o=void 0,this.#c=!1,this.#a=0,M(()=>this.#f()),b(()=>{this.#a++,this.#o?.disconnect(),this.#m(this.styleElement,!1)})}#g(){const e=this.styleElement;return e===null?[]:Array.from(e.children).filter(t=>t.hasAttribute("data-cw-list-item"))}#L(e){return e!==void 0&&(this.#e==="single"?this.#l===e:this.#e==="multiple"&&this.#n.has(e))}#b(e){const t=u.get(e);return t===void 0||t.disabled()||this.#e!=="none"&&t.value()===void 0}#S(e){if(!(this.#r||this.#e==="none")){this.#r=!0;for(const t of e){const n=u.get(t),i=n?.value();i===void 0||n?.initiallySelected()!==!0||(this.#e==="single"&&!this.#s?this.#l??=i:this.#e==="multiple"&&!this.#d&&this.#n.add(i))}}}#y(e){const t=this.#t,n=e.find(l=>this.#L(u.get(l)?.value())),i=l=>!this.#b(l)&&c(l);let o;return t!==void 0&&e.includes(t)&&!this.#i&&c(t)?t:(o=n!==void 0&&i(n)?n:e.find(i),this.#i=o===void 0,o??=e.find(c),this.#i&&=o!==void 0,o)}#f(){const e=this.styleElement,t=this.#g(),n=this.#e!=="none",i=e?.ownerDocument.activeElement,o=this.#t;if(e?.isConnected===!0){this.#c||this.#C(e,t),this.#S(t);for(const l of t){const a=u.get(l)?.value();this.#h(l,n?{option:n,selected:this.#L(a),valueless:a===void 0,focusStop:l===o}:S)}if(this.#t=n?this.#y(t):void 0,this.#t!==o)for(const l of[o,this.#t]){const a=l===void 0?void 0:this.#u.get(l);l!==void 0&&a!==void 0&&t.includes(l)&&this.#h(l,{...a,focusStop:l===this.#t})}n&&m(i)&&t.includes(i)&&i!==this.#t&&!c(i)&&this.#t?.focus(),this.#o?.takeRecords()}}#h(e,t){const n=this.#u.get(e);n!==void 0&&R(n,t)||(this.#u.set(e,t),u.get(e)?.update(t))}#E(e){const t=this.#t,n=t===void 0?void 0:this.#u.get(t),i=this.#u.get(e);e===t||i?.option!==!0||(this.#t=e,this.#i=!1,t!==void 0&&n!==void 0&&this.#h(t,{...n,focusStop:!1}),this.#h(e,{...i,focusStop:!0}),this.#o?.takeRecords())}#C(e,t){const n=e.ownerDocument.defaultView?.MutationObserver,i={attributeFilter:O,attributes:!0},o={attributeFilter:X,attributes:!0};if(n!==void 0){this.#o??=new n(this.#I),this.#o.disconnect(),this.#o.observe(e,{...i,childList:!0});for(const l of t)this.#o.observe(l,o);for(let l=e.parentElement;l!==null;l=l.parentElement)this.#o.observe(l,i);this.#c=!0}}#I=e=>{const t=this.styleElement,n=this.#t;let i=!1,o=!1;for(const l of e){const a=l.target;l.type==="childList"&&(this.#c=!1),l.type==="childList"||a===t||a.contains(t)||l.attributeName==="data-cw-list-value"||l.attributeName==="aria-disabled"?i=!0:(a===n||n===void 0||this.#i)&&(o=!0)}(i||o&&this.#e!=="none"&&(n===void 0||this.#i||!c(n)))&&this.#f()};#v(e,t){const n=u.get(e),i=n?.value();let o;if(!(this.#e==="none"||n===void 0||i===void 0||this.#b(e))){if(this.#e==="multiple")o=!this.#n.has(i),!this.#d&&o?this.#n.add(i):this.#d||this.#n.delete(i);else{if(this.#l===i)return;o=!0,this.#s||(this.#l=i)}this.#f(),d(()=>{const l=this.props.onSelectionChange,a=this.props.onChange;n.notifySelection(o,t),l?.(i,o,t),a!==l&&a?.(i,o,t)})}}#p(e){const n=(m(e.target)?e.target:null)?.closest("[data-cw-list-item]")??null;return n!==null&&n.parentElement===this.styleElement?n:void 0}#T=e=>{const t=this.#p(e),n=this.styleElement,i=this.#a;t===void 0||e.defaultPrevented||!m(e.target)||e.target.closest(".cw-ListItem-action")===null&&v(e.target,t,e.composedPath())||p(e,n,()=>{!e.defaultPrevented&&this.#a===i&&t.parentElement===this.styleElement&&this.#v(t,e)},!1)};#w=e=>{const t=this.#p(e);t!==void 0&&e.target===t&&this.#E(t)};#M=e=>{const t=this.#p(e),n=this.#g(),i=this.styleElement,o=this.#a,l=t===void 0?-1:n.indexOf(t),a=e.key==="ArrowDown"||e.key==="ArrowRight"?1:e.key==="ArrowUp"||e.key==="ArrowLeft"?-1:0;let r;if(t===void 0||e.target!==t||this.#e==="none"||l<0)return;if((e.key==="Enter"||e.key===" ")&&!e.repeat){p(e,i,()=>{this.#a===o&&t.parentElement===this.styleElement&&this.#v(t,e)});return}if(e.key==="Home"||e.key==="End")r=(e.key==="Home"?n:n.slice().reverse()).find(c);else if(a!==0)for(let h=1;h<n.length&&r===void 0;h++){const g=n[(l+(a+n.length)*h)%n.length];c(g)&&(r=g)}if(r===void 0)return;const f=r;p(e,i,()=>{this.#a!==o||f.parentElement!==this.styleElement||(this.#E(f),f.focus())})};#m(e,t){const n=t?"addEventListener":"removeEventListener";e?.[n]("click",this.#T),e?.[n]("focusin",this.#w),e?.[n]("keydown",this.#M)}applyComponentProps(){const e=super.readProps(["dense","selectedValue","selectedValues","selectionMode","variant"]);e.variantChanged&&super.setAttribute("data-cw-list-variant",e.variant??"baseline"),e.denseChanged&&super.setClass("cw-List-dense",e.dense===!0),e.selectionModeChanged&&(this.#e=e.selectionMode??"none",super.setAttribute("aria-multiselectable",this.#e==="multiple"?"true":void 0),super.setAttribute("data-cw-list-selection-mode",this.#e),super.setAttribute("role",this.#e==="none"?"list":"listbox")),e.selectedValueChanged&&this.#s&&(this.#l=e.selectedValue),e.selectedValuesChanged&&this.#d&&(this.#n=new Set(e.selectedValues??[])),(e.selectionModeChanged||e.selectedValueChanged||e.selectedValuesChanged)&&this.#f()}onStyleElementChanged(e){this.#a++,this.#o?.disconnect(),this.#c=!1,this.#t=void 0,this.#i=!1,this.#m(super.styleElement,!1),super.onStyleElementChanged(e),this.#m(e,!0)}render(e){const t=<ul class="cw-List"/>;return V(t,e),t}}const F=E(()=>N,()=>_),se=s=>L(y.Provider,{value:d(()=>({mode:s.selectionMode??"none",selectedValue:"selectedValue"in s?s.selectedValue:s.defaultSelectedValue,selectedValueKnown:"selectedValue"in s||s.defaultSelectedValue!==void 0,selectedValues:s.selectedValues,focusStopAssigned:!1})),get children(){return L(F,s)}});function K(s,e,t,n){const i=d(()=>s.onActivate!==void 0),o=d(()=>s.overline===void 0),l=d(()=>s.supportingContent===void 0&&s.supportingText===void 0),a=<>
|
|
2
|
+
<span class="cw-ListItem-overline"hidden={o}>{s.overline}</span>
|
|
3
|
+
<span class="cw-ListItem-headline">{s.headline??e}</span>
|
|
4
|
+
<span class="cw-ListItem-supporting"hidden={l}>{s.supportingContent??s.supportingText}</span>
|
|
5
|
+
</>;return<span class="cw-ListItem-static-content">
|
|
6
|
+
<span class="cw-ListItem-leading">{s.leading??s.leadingContent}</span>
|
|
7
|
+
{i?<button class="cw-ListItem-action cw-ListItem-content"disabled={n}tabIndex={t?-1:void 0}type="button">{a}</button>:<span class="cw-ListItem-content">{a}</span>}
|
|
8
|
+
<span class="cw-ListItem-trailing">{s.trailing??s.trailingContent}</span>
|
|
9
|
+
</span>}function T(s,e){const t=x(y),n=t?.mode==="single"||t?.mode==="multiple",i=e.value,o=e.disabled===!0||n&&i===void 0,l=("selected"in e?e.selected:e.defaultSelected)===!0,a=t?.mode==="single"?t.selectedValueKnown:t?.selectedValues!==void 0,r=n&&(a?t.mode==="single"?i===t.selectedValue:i!==void 0&&t.selectedValues?.includes(i)===!0:l),f=n&&!o&&!t.focusStopAssigned&&(r||!a),h=C(e);return f&&(t.focusStopAssigned=!0),<li{...s}aria-disabled={o?"true":void 0}aria-selected={n?r?"true":"false":void 0}classList={{...s.classList,"cw-ListItem":!0,"cw-ListItem-disabled":o,"cw-ListItem-selectable":n,"cw-ListItem-selected":n&&r,[I(e.leadingType)]:e.leadingType!==void 0,[`_cw-ListItem-lines-${h}`]:!0}}data-cw-list-item="true"data-cw-list-lines={h.toString()}data-cw-list-value={i}role={n?"option":void 0}tabIndex={n?f?0:-1:e.onActivate!==void 0?void 0:e.tabIndex}>{K(e,s.children,n,o)}</li>}class U extends P{#s;#d;#e;#l;#n;constructor(e){super(e,{baseInteractionCssClassName:"cw-ListItem",styleElementIsFunction:!0}),this.#s=d(()=>e.onActivate!==void 0),this.#d={value:()=>d(()=>this.props.value),initiallySelected:()=>d(()=>("selected"in this.props?this.props.selected:this.props.defaultSelected)===!0),disabled:()=>d(()=>this.props.disabled===!0),update:t=>{this.#e=t,this.#r()},notifySelection:(t,n)=>d(()=>this.props.onSelectedChange?.(t,n))},this.#e=S,this.#l=null,this.#n=!1,b(()=>this.#n=!0)}#r(){const e=this.#e,t=d(()=>this.props.disabled===!0)||e.valueless,n=this.#l;super.setAttribute("role",e.option?"option":void 0),super.setAttribute("aria-selected",e.option?`${e.selected}`:void 0),super.setAttribute("aria-disabled",t?"true":void 0),super.setAttribute("tabindex",e.option?e.focusStop?0:-1:this.#s?void 0:d(()=>this.props.tabIndex)),super.setClass("cw-ListItem-disabled",t),super.setClass("cw-ListItem-selectable",e.option),super.setClass("cw-ListItem-selected",e.option&&e.selected),super.setEnabledInteractionStates(!t&&(e.option||this.#s)?J:0),n!==null&&(n.disabled=t,e.option?n.tabIndex=-1:n.removeAttribute("tabindex"))}#t=e=>{const t=this.styleElement;!this.#s||t===null||d(()=>this.props.disabled===!0)||!m(e.target)||e.target.closest("[data-cw-list-item]")!==t||e.target.closest(".cw-ListItem-action")===null&&v(e.target,t,e.composedPath())||p(e,t,()=>{!this.#n&&this.styleElement===t&&d(()=>this.props.disabled!==!0)&&d(()=>this.props.onActivate?.(e))},!1)};#i=e=>{const t=this.styleElement;e.defaultPrevented||!this.#s||e.target!==t||e.repeat||e.key!=="Enter"&&e.key!==" "||d(()=>this.props.disabled===!0)||p(e,t,()=>{!this.#n&&this.styleElement===t&&d(()=>this.props.disabled!==!0)&&d(()=>this.props.onActivate?.(e))},!this.#e.option)};applyComponentProps(){const e=super.readProps(["disabled","leadingType","lines","overline","supportingContent","supportingText","tabIndex","value"]),t=this.styleElement;if(e.leadingTypeChanged&&super.setClass("leadingType",e.leadingType===void 0?void 0:I(e.leadingType)),e.linesChanged||e.overlineChanged||e.supportingContentChanged||e.supportingTextChanged){const n=C(e);super.setClass("lines",`_cw-ListItem-lines-${n}`),super.setAttribute("data-cw-list-lines",n.toString()),t?.querySelector(":scope .cw-ListItem-overline")?.toggleAttribute("hidden",e.overline===void 0),t?.querySelector(":scope .cw-ListItem-supporting")?.toggleAttribute("hidden",e.supportingContent===void 0&&e.supportingText===void 0)}e.valueChanged&&super.setAttribute("data-cw-list-value",e.value),(e.disabledChanged||e.tabIndexChanged)&&this.#r()}onStyleElementChanged(e){const t=super.styleElement;t!==null&&(u.delete(t),t.removeEventListener("click",this.#t),t.removeEventListener("keydown",this.#i)),super.onStyleElementChanged(e),this.#l=e?.querySelector(".cw-ListItem-action")??null,e!==null&&(u.set(e,this.#d),e.addEventListener("click",this.#t),e.addEventListener("keydown",this.#i))}render(e){const t=this.props;return d(()=>T({children:e},{..."selected"in t?{selected:t.selected}:{},defaultSelected:t.defaultSelected,disabled:t.disabled,get headline(){return t.headline},get leading(){return t.leading},get leadingContent(){return t.leadingContent},leadingType:t.leadingType,lines:t.lines,onActivate:t.onActivate,get overline(){return t.overline},get supportingContent(){return t.supportingContent},get supportingText(){return t.supportingText},tabIndex:t.tabIndex,get trailing(){return t.trailing},get trailingContent(){return t.trailingContent},value:t.value}))}}const q=E(()=>T,()=>U),ie=s=>q(B(s,["children","headline","leading","leadingContent","overline","supportingContent","supportingText","trailing","trailingContent"]));export{se as List,_ as ListController,ie as ListItem,U as ListItemController};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer cw-style{.cw-Menu-popup,.cw-MenuGroup,.cw-MenuGroup-label,.cw-MenuItem,.cw-SubMenu{--cw-Surface-menuContentColor: cw-var(--cw-Surface-menuContentColor, default);--cw-Surface-menuDisabledOpacity: cw-var(--cw-Surface-menuDisabledOpacity, default);--cw-Surface-menuElevation: cw-var(--cw-Surface-menuElevation, default);--cw-Surface-menuGroupColor: cw-var(--cw-Surface-menuGroupColor, default);--cw-Surface-menuGroupIconSize: cw-var(--cw-Surface-menuGroupIconSize, default);--cw-Surface-menuGroupInnerShape: cw-var(--cw-Surface-menuGroupInnerShape, default);--cw-Surface-menuGroupItemHeight: cw-var(--cw-Surface-menuGroupItemHeight, default);--cw-Surface-menuGroupItemOuterShape: cw-var(--cw-Surface-menuGroupItemOuterShape, default);--cw-Surface-menuGroupItemSelectedShape: cw-var(--cw-Surface-menuGroupItemSelectedShape, default);--cw-Surface-menuGroupItemShape: cw-var(--cw-Surface-menuGroupItemShape, default);--cw-Surface-menuGroupSelectedColor: cw-var(--cw-Surface-menuGroupSelectedColor, default);--cw-Surface-menuGroupSelectedContentColor: cw-var(--cw-Surface-menuGroupSelectedContentColor, default);--cw-Surface-menuGroupShape: cw-var(--cw-Surface-menuGroupShape, default);--cw-Surface-menuItemHeight: cw-var(--cw-Surface-menuItemHeight, default);--cw-Surface-menuItemMaxWidth: cw-var(--cw-Surface-menuItemMaxWidth, default);--cw-Surface-menuItemMinWidth: cw-var(--cw-Surface-menuItemMinWidth, default);--cw-Surface-menuSelectedColor: cw-var(--cw-Surface-menuSelectedColor, default);--cw-Surface-menuSelectedContentColor: cw-var(--cw-Surface-menuSelectedContentColor, default);--cw-Surface-menuSupportingColor: cw-var(--cw-Surface-menuSupportingColor, default);--cw-Surface-menuVibrantActiveIconColor: cw-var(--cw-Surface-menuVibrantActiveIconColor, default);--cw-Surface-menuVibrantColor: cw-var(--cw-Surface-menuVibrantColor, default);--cw-Surface-menuVibrantContentColor: cw-var(--cw-Surface-menuVibrantContentColor, default);--cw-Surface-menuVibrantSelectedColor: cw-var(--cw-Surface-menuVibrantSelectedColor, default);--cw-Surface-menuVibrantSelectedContentColor: cw-var(--cw-Surface-menuVibrantSelectedContentColor, default)}.cw-Menu{display:inline-flex;flex-flow:column nowrap;position:relative}.cw-Menu-trigger{display:inline-flex}.cw-SubMenu,.cw-SubMenu>.cw-Menu-trigger{display:block}.cw-Menu-popup{--cw-elevationShadow-level: cw-var(--cw-Surface-menuElevation);--cw-menu-item-shape-end: 0px;--cw-menu-item-shape-start: 0px;--cw-menu-popup-inset: 0px;background-color:var(--cw-surface-menu-color, cw-var(--cw-Surface-menuColor));border:0;border-radius:var(--cw-surface-menu-shape, cw-var(--cw-Surface-menuShape));box-sizing:border-box;color:cw-var(--cw-Surface-menuContentColor);display:flex;flex-flow:column nowrap;inline-size:max-content;max-block-size:calc(100vh - (2*cw-var(--cw-Measurement-space600)));max-inline-size:calc(100vw - (2*cw-var(--cw-Measurement-space100)));opacity:0;overflow:auto;padding-block:cw-var(--cw-Measurement-space100);padding-inline:0;position:absolute;transform:scale(.8);transition-behavior:allow-discrete;transition-duration:cw-var(--cw-Motion-spring-spatial-fast-duration),cw-var(--cw-Motion-spring-effect-fast-duration),cw-var(--cw-Motion-spring-spatial-fast-duration),cw-var(--cw-Motion-spring-spatial-fast-duration);transition-property:display,opacity,overlay,transform;transition-timing-function:cw-var(--cw-Motion-spring-spatial-fast-easing),cw-var(--cw-Motion-spring-effect-fast-easing),cw-var(--cw-Motion-spring-spatial-fast-easing),cw-var(--cw-Motion-spring-spatial-fast-easing);z-index:20}.cw-Menu-open>.cw-Menu-popup:not([hidden]){opacity:1;transform:none}@starting-style{.cw-Menu-open>.cw-Menu-popup:not([hidden]){opacity:0;transform:scale(.8)}}.cw-Menu-popup[hidden]{display:none}.cw-Menu-popup:popover-open{margin:0;position:fixed}._cw-Menu-bottom-start>.cw-Menu-popup{inset-block-start:100%;inset-inline-start:0}._cw-Menu-bottom-end>.cw-Menu-popup{inset-block-start:100%;inset-inline-end:0}._cw-Menu-top-start>.cw-Menu-popup{inset-block-end:100%;inset-inline-start:0}._cw-Menu-top-end>.cw-Menu-popup{inset-block-end:100%;inset-inline-end:0}.cw-MenuGroup{--cw-elevationShadow-level: cw-var(--cw-Elevation-level-0);display:flex;flex-flow:column nowrap}.cw-MenuGroup-label{-cw-typescale:--cw-Typescale-label-large;align-items:center;box-sizing:border-box;display:flex;max-inline-size:cw-var(--cw-Surface-menuItemMaxWidth);min-block-size:cw-var(--cw-Measurement-space400);min-inline-size:cw-var(--cw-Surface-menuItemMinWidth);padding-inline-end:cw-var(--cw-Measurement-space50);padding-inline-start:cw-var(--cw-Measurement-space150)}.cw-MenuGroup-label[hidden]{display:none}:is(.cw-Menu-popup,.cw-MenuGroup)>.cw-Divider{inline-size:auto;margin-block:cw-var(--cw-Measurement-space25);margin-inline:cw-var(--cw-Measurement-space150)}.cw-MenuItem{--cw-interactable-focusIndicator-color: var(--cw-surface-focus-indicator-color, cw-var(--cw-Surface-focusIndicatorColor));--cw-interactable-focusIndicator-offset: cw-var(--cw-State-focusIndicator-innerOffset);--cw-interactable-focusIndicator-thickness: cw-var(--cw-State-focusIndicator-thickness);--cw-menu-item-active-icon-color: var(--cw-menu-item-icon-color);--cw-menu-item-content-color: cw-var(--cw-Surface-menuContentColor);--cw-menu-item-icon-color: cw-var(--cw-Surface-menuSupportingColor);--cw-menu-item-icon-size: cw-var(--cw-Icon-size, default);--cw-menu-item-selected-color: cw-var(--cw-Surface-menuSelectedColor);--cw-menu-item-selected-content-color: cw-var(--cw-Surface-menuSelectedContentColor);-cw-typescale:--cw-Typescale-label-large;align-items:center;background-color:transparent;border-end-end-radius:var(--cw-menu-item-shape-end, 0px);border-end-start-radius:var(--cw-menu-item-shape-end, 0px);border-start-end-radius:var(--cw-menu-item-shape-start, 0px);border-start-start-radius:var(--cw-menu-item-shape-start, 0px);box-sizing:border-box;color:var(--cw-menu-item-content-color);cursor:pointer;display:flex;gap:cw-var(--cw-Measurement-space150);max-inline-size:cw-var(--cw-Surface-menuItemMaxWidth);min-block-size:cw-var(--cw-Surface-menuItemHeight);min-inline-size:cw-var(--cw-Surface-menuItemMinWidth);padding-inline:cw-var(--cw-Measurement-space150);transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration),cw-var(--cw-Motion-spring-spatial-fast-duration),cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:background-color,border-radius,color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing),cw-var(--cw-Motion-spring-spatial-fast-easing),cw-var(--cw-Motion-spring-effect-fast-easing)}.cw-MenuItem-hover{--cw-interactable-stateLayer-color: currentcolor;--cw-interactable-stateLayer-opacity: cw-var(--cw-State-layer-hoverOpacity)}.cw-MenuItem-focus{--cw-interactable-stateLayer-color: currentcolor;--cw-interactable-stateLayer-opacity: cw-var(--cw-State-layer-focusOpacity)}.cw-MenuItem-press{--cw-interactable-ripple-color: currentcolor;--cw-interactable-ripple-opacity: cw-var(--cw-State-layer-pressOpacity)}.cw-MenuItem-content{display:flex;flex:1 1 auto;flex-flow:column nowrap;min-inline-size:0}.cw-MenuItem-leading,.cw-MenuItem-trailing,.cw-MenuItem-badge{align-items:center;color:var(--cw-menu-item-icon-color);display:inline-flex;flex:0 0 auto}.cw-MenuItem-supporting{-cw-typescale:--cw-Typescale-body-medium;color:var(--cw-menu-item-icon-color)}:is(.cw-MenuItem-hover,.cw-MenuItem-focus,.cw-MenuItem-press)>:is(.cw-MenuItem-leading,.cw-MenuItem-trailing){color:var(--cw-menu-item-active-icon-color)}.cw-MenuItem-checked{background-color:var(--cw-menu-item-selected-color);color:var(--cw-menu-item-selected-content-color)}.cw-MenuItem-disabled{--cw-interactable-stateLayer-opacity: 0;color:cw-scale-opacity(var(--cw-menu-item-content-color),cw-var(--cw-Surface-menuDisabledOpacity));cursor:default;pointer-events:none}.cw-MenuItem-disabled.cw-MenuItem-checked{background-color:cw-scale-opacity(var(--cw-menu-item-selected-color),cw-var(--cw-Surface-menuDisabledOpacity));color:cw-scale-opacity(var(--cw-menu-item-selected-content-color),cw-var(--cw-Surface-menuDisabledOpacity))}:is(.cw-MenuItem-checked,.cw-MenuItem-disabled)>:is(.cw-MenuItem-leading,.cw-MenuItem-trailing,.cw-MenuItem-badge),:is(.cw-MenuItem-checked,.cw-MenuItem-disabled)>.cw-MenuItem-content>.cw-MenuItem-supporting{color:inherit}:is(.cw-MenuItem-leading,.cw-MenuItem-trailing) .cw-Icon{--cw-Icon-color: currentColor;--cw-Icon-size: var(--cw-menu-item-icon-size)}.cw-MenuItem-leading:empty,.cw-MenuItem-trailing:empty,.cw-MenuItem-supporting:empty,.cw-MenuItem-badge:empty{display:none}.cw-SubMenu>.cw-Menu-trigger>.cw-MenuItem:after{block-size:cw-var(--cw-Measurement-space75);border-block-start:solid currentColor cw-var(--cw-Measurement-space25);border-inline-end:solid currentColor cw-var(--cw-Measurement-space25);color:var(--cw-menu-item-icon-color);content:"";inline-size:cw-var(--cw-Measurement-space75);margin-inline:auto cw-var(--cw-Measurement-space50);transform:rotate(45deg)}.cw-SubMenu:dir(rtl)>.cw-Menu-trigger>.cw-MenuItem:after{transform:rotate(-45deg)}._cw-Menu-expressive .cw-Menu-popup{--cw-menu-item-shape-end: cw-var(--cw-Surface-menuGroupItemShape);--cw-menu-item-shape-start: cw-var(--cw-Surface-menuGroupItemShape);background-color:cw-var(--cw-Surface-menuGroupColor);border-radius:cw-var(--cw-Surface-menuGroupShape);padding-block:cw-var(--cw-Measurement-space25)}._cw-Menu-expressive .cw-Menu-popup:has(>.cw-MenuGroup){--cw-elevationShadow-level: cw-var(--cw-Elevation-level-0);--cw-menu-popup-inset: cw-var(--cw-Measurement-space100);background-color:transparent;gap:cw-var(--cw-Measurement-space25);margin:calc(-1 * var(--cw-menu-popup-inset));padding:var(--cw-menu-popup-inset)}._cw-Menu-expressive .cw-MenuGroup{--cw-elevationShadow-level: cw-var(--cw-Surface-menuElevation);--cw-menu-group-shape-end: cw-var(--cw-Surface-menuGroupInnerShape);--cw-menu-group-shape-start: cw-var(--cw-Surface-menuGroupInnerShape);--cw-menu-item-shape-end: cw-var(--cw-Surface-menuGroupItemShape);--cw-menu-item-shape-start: cw-var(--cw-Surface-menuGroupItemShape);background-color:cw-var(--cw-Surface-menuGroupColor);border-end-end-radius:var(--cw-menu-group-shape-end);border-end-start-radius:var(--cw-menu-group-shape-end);border-start-end-radius:var(--cw-menu-group-shape-start);border-start-start-radius:var(--cw-menu-group-shape-start);padding-block:cw-var(--cw-Measurement-space25);transition-duration:cw-var(--cw-Motion-spring-spatial-fast-duration);transition-property:border-radius;transition-timing-function:cw-var(--cw-Motion-spring-spatial-fast-easing)}._cw-Menu-expressive .cw-Menu-popup>.cw-MenuGroup:nth-child(1 of.cw-MenuGroup){--cw-menu-group-shape-start: cw-var(--cw-Surface-menuGroupShape)}._cw-Menu-expressive .cw-Menu-popup>.cw-MenuGroup:nth-last-child(1 of.cw-MenuGroup){--cw-menu-group-shape-end: cw-var(--cw-Surface-menuGroupShape)}._cw-Menu-expressive .cw-Menu-popup>.cw-MenuGroup:has(>.cw-SubMenu.cw-Menu-open){--cw-menu-group-shape-end: cw-var(--cw-Surface-menuGroupInnerShape);--cw-menu-group-shape-start: cw-var(--cw-Surface-menuGroupInnerShape)}._cw-Menu-expressive :is(.cw-Menu-popup,.cw-MenuGroup)>:nth-child(1 of.cw-MenuItem,.cw-SubMenu){--cw-menu-item-shape-start: cw-var(--cw-Surface-menuGroupItemOuterShape)}._cw-Menu-expressive :is(.cw-Menu-popup,.cw-MenuGroup)>:nth-last-child(1 of.cw-MenuItem,.cw-SubMenu){--cw-menu-item-shape-end: cw-var(--cw-Surface-menuGroupItemOuterShape)}._cw-Menu-expressive .cw-MenuItem{--cw-menu-item-icon-size: cw-var(--cw-Surface-menuGroupIconSize);--cw-menu-item-selected-color: cw-var(--cw-Surface-menuGroupSelectedColor);--cw-menu-item-selected-content-color: cw-var(--cw-Surface-menuGroupSelectedContentColor);-cw-typescale:--cw-Typescale-body-large;margin-inline:cw-var(--cw-Measurement-space50);min-block-size:cw-var(--cw-Surface-menuGroupItemHeight);padding-block:cw-var(--cw-Measurement-space100);padding-inline:cw-var(--cw-Measurement-space200)}._cw-Menu-expressive .cw-MenuItem:has(>.cw-MenuItem-content>.cw-MenuItem-supporting:not(:empty)){margin-block:cw-var(--cw-Measurement-space25)}._cw-Menu-expressive .cw-MenuItem.cw-MenuItem-checked{border-radius:cw-var(--cw-Surface-menuGroupItemSelectedShape)}._cw-Menu-expressive .cw-MenuItem-trailing{-cw-typescale:--cw-Typescale-label-small}._cw-Menu-expressive[data-cw-menu-color=vibrant] :is(.cw-Menu-popup,.cw-MenuGroup){background-color:cw-var(--cw-Surface-menuVibrantColor);color:cw-var(--cw-Surface-menuVibrantContentColor)}._cw-Menu-expressive[data-cw-menu-color=vibrant] .cw-Menu-popup:has(>.cw-MenuGroup){background-color:transparent}._cw-Menu-expressive[data-cw-menu-color=vibrant] .cw-MenuItem{--cw-menu-item-active-icon-color: cw-var(--cw-Surface-menuVibrantActiveIconColor);--cw-menu-item-content-color: cw-var(--cw-Surface-menuVibrantContentColor);--cw-menu-item-icon-color: cw-var(--cw-Surface-menuVibrantContentColor);--cw-menu-item-selected-color: cw-var(--cw-Surface-menuVibrantSelectedColor);--cw-menu-item-selected-content-color: cw-var(--cw-Surface-menuVibrantSelectedContentColor)}.cw-Menu[data-cw-menu-orientation=horizontal]>.cw-Menu-popup,.cw-Menu[data-cw-menu-orientation=horizontal]>.cw-Menu-popup>.cw-MenuGroup{flex-flow:row nowrap;gap:cw-var(--cw-Measurement-space25)}.cw-Menu[data-cw-menu-orientation=horizontal]>.cw-Menu-popup{padding:cw-var(--cw-Measurement-space100)}.cw-Menu[data-cw-menu-orientation=horizontal]>.cw-Menu-popup .cw-MenuItem{border-radius:cw-var(--cw-Surface-menuGroupItemShape);flex:0 0 auto;margin:0;min-block-size:0;min-inline-size:0;padding-block:cw-var(--cw-Measurement-space75);padding-inline:cw-var(--cw-Measurement-space150)}.cw-Menu[data-cw-menu-orientation=horizontal]>.cw-Menu-popup :is(.cw-MenuItem-hover,.cw-MenuItem-focus,.cw-MenuItem-press){border-radius:cw-var(--cw-Surface-menuGroupItemOuterShape)}.cw-Menu[data-cw-menu-orientation=horizontal]>.cw-Menu-popup .cw-MenuItem-checked{border-radius:calc((1lh + 2*cw-var(--cw-Measurement-space75))/2)}}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import{createComponent as oe,createContext as se,createSignal as V,createUniqueId as A,mergeProps as re,onCleanup as W,onMount as ae,splitProps as K,untrack as d,useContext as O}from"solid-js";import{insert as F}from"solid-js/web";import{defineDomComponent as U}from"..";import{ELEVATION_SHADOW_CSS_CLASS as D}from"../container/elevation-shadow";import{DomController as B}from"../dom/client";import{FocusState as z,HoverState as le,PressState as ue,defineInteractableComponent as H}from"../state";import{InteractableController as de}from"../state/controller";import{deferAfterDelegatedCancellation as k}from"../util";import{isElementNode as g}from"./interactive";import{resolveSurfaceSlots as ce}from"./slots";import"../container/elevation-shadow.css";import"./surface.css";import"./menu.css";const L="[role=menuitem], [role=menuitemcheckbox], [role=menuitemradio]",R="[role=menuitemradio]",he="button, a[href], input, [tabindex]:not([tabindex='-1']), [role=button], [role=link], [role=menuitem]",me="button, a[href], input, [role=button], [role=link], [role=menuitem]",pe="button, a[href], input, [tabindex], [role=button], [role=link], [role=menuitem]",$="cw-menu-select",Y="cw-menu-radio-uncheck",j="cw-menu-radio-normalize",X=z|le|ue,T=48,I=8,fe=150,be=300,Ee=500,ge=50,ve=8,Q="_cw-Menu-expressive";function y(i,e,t){return i==null?void 0:{view:i,id:i.setTimeout(t,e)}}function f(i){i?.view.clearTimeout(i.id)}const x=se(),C=new WeakMap,J=new WeakSet;function G(i,e){return i.matches(L)&&i.closest("[role=menu]")===e&&i.closest("[hidden], [inert], [aria-hidden='true']")===null&&i.getClientRects().length>0&&i.ownerDocument.defaultView?.getComputedStyle(i).visibility==="visible"}function Z(i){return i==="expressive"||i==="segmented"}function Me(i){return(i.textContent??"").trim().replace(/\s+/gu," ").toLocaleLowerCase()}function q(i,e,t,n){const o=i+e;return i>=n?0:o<=t?1:e===0?0:((Math.max(t,i)+Math.min(n,o))/2-i)/e}function we(i,e,t,n,o){return[q(e,n,i.left,i.right),q(t,o,i.top,i.bottom)]}function ye(i,e){return{menuId:i,open:e,attrs:{get"aria-controls"(){return i()},get"aria-expanded"(){return e()?"true":"false"},"aria-haspopup":"menu"}}}function Ce(i,e,t){return typeof i!="function"?i:d(()=>i(ye(e,t)))}function ee(i,e,t){const n=("open"in e?e.open:e.defaultOpen)===!0,o=t?.menuId()??e.id??A(),[s,r]=K(i,["aria-label"]),a=t?.menuId??(()=>o),c=t?.open??(()=>n);return<div{...r}classList={{...i.classList,"cw-Menu":!0,"cw-SubMenu":e.submenu===!0,"cw-Menu-open":n,[`_cw-Menu-${e.placement??"bottom-start"}`]:!0,[Q]:Z(e.variant)}}data-cw-menu="true"data-cw-menu-color={e.color??"standard"}data-cw-menu-orientation={e.orientation??"vertical"}data-cw-menu-variant={e.variant??"baseline"}>
|
|
2
|
+
<span class="cw-Menu-trigger"data-cw-menu-trigger="true">{Ce(e.trigger,a,c)}</span>
|
|
3
|
+
<div aria-label={s["aria-label"]??e.label??"Menu"}aria-orientation={e.orientation??"vertical"}class={`cw-Menu-popup ${D}`}data-cw-menu-popup="true"hidden={!n}id={o}popover={e.submenu===!0||e.modal===!1?"manual":"auto"}role="menu"tabIndex={-1}>{i.children}</div>
|
|
4
|
+
</div>}class Se extends B{#n;#i;#h;#d;#M;#u;#A;#m;#o;#w;#e;#s;#t;#p;#f;#y;#C;#S;#L;#c;#T;#x;#r;#b;#a;#E;#g;#v;#k;constructor(e){const[t,n]=K(e,["attr:aria-label"]),o=d(()=>("open"in e?e.open:e.defaultOpen)===!0),s=d(()=>e.id??""),[r,a]=V(o),[c,l]=V(s);super(n,{styleElementIsFunction:!0}),this.#n=t,this.#i="open"in e,this.#t=o,this.#h=r,this.#d=a,this.#m=s,this.#M=c,this.#u=l,this.#A=new WeakSet,this.#o=null,this.#w=null,this.#e=null,this.#s=null,this.#p="",this.#f=void 0,this.#y=!1,this.#C=!0,this.#S=!1,this.#L=void 0,this.#c=void 0,this.#T=void 0,this.#x=0,this.#r=void 0,this.#b=void 0,this.#a=!1,this.#E=void 0,this.#g=void 0,this.#v=void 0,this.#k=void 0,ae(()=>{this.#z(),this.#V(),this.#t&&this.#l(!0,!1)}),W(()=>this.#de())}isOpen(){return this.#t}open(e){this.#l(!0,!0,e)}close(e){this.#l(!1,!0,e)}#D(e,t){d(()=>this.props.onOpenChange?.(e,t))}#H(){const e=this.#e;return e!==null&&e.hasAttribute("popover")&&typeof e.showPopover=="function"}#q(e,t){!this.#i||e===this.#t||this.#L===e||(this.#L=e,this.#D(e,t),f(this.#c),this.#c=y(this.#o?.ownerDocument.defaultView,ge,()=>{this.#L=void 0,this.#c=void 0}))}#W(){const e=this.#e;if(!(e===null||!this.#H()||!this.#t||this.#a)){e.hidden=!1;try{e.matches(":popover-open")||e.showPopover()}catch{}e.matches(":popover-open")||this.#K()}}#K(){const e=this.#e;e===null||!this.#t||this.#T!==void 0||this.#x>=ve||(this.#x++,this.#T=y(e.ownerDocument.defaultView,0,()=>{this.#T=void 0,e.isConnected?this.#W():this.#K()}))}#I=()=>{const e=this.#e?.ownerDocument.defaultView;this.#b!==void 0||e==null||(this.#b={view:e,id:e.requestAnimationFrame(()=>{this.#b=void 0,this.#F()})})};#_(){this.#b?.view.cancelAnimationFrame(this.#b.id),this.#b=void 0}#F(){const e=this.#e,t=this.#s,n=e?.ownerDocument.defaultView;if(e===null||t===null||n==null||!this.#t||this.#a)return;const o=n.getComputedStyle(e),s=Number.parseFloat(o.getPropertyValue("--cw-menu-popup-inset")),r=Number.isFinite(s)?s:0,a=t.getBoundingClientRect(),c=e.querySelector(L),l=e.offsetWidth-2*r,m=e.offsetHeight-2*r,v=this.props.placement??"bottom-start",p=o.direction==="rtl",M=u=>u>=I&&u+l<=n.innerWidth-I,w=u=>u>=T&&u+m<=n.innerHeight-T;let h,b;if(v.startsWith("inline-")){const u=v.endsWith("-end")!==p,E=u?a.left-l:a.right;h=u?a.right:a.left-l,!M(h)&&M(E)&&(h=E),b=a.top-(c===null?0:c.offsetTop-r)}else{const u=v.startsWith("top-"),E=u?a.bottom:a.top-m;h=v.endsWith("-end")!==p?a.right-l:a.left,b=u?a.top-m:a.bottom,!w(b)&&w(E)&&(b=E)}h=Math.max(I,Math.min(h,n.innerWidth-l-I)),b=Math.max(T,Math.min(b,n.innerHeight-m-T));const[S,P]=we(a,h,b,l,m);e.style.position="fixed",e.style.inset="auto",e.style.left=`${h}px`,e.style.top=`${b}px`,e.style.transformOrigin=`${r+S*l}px ${r+P*m}px`}#U(){const e=this.#o?.parentElement?.closest("[data-cw-menu=true]");return e==null?void 0:C.get(e)}#P(){return Array.from(this.#e?.querySelectorAll("[data-cw-menu=true]")??[]).map(e=>C.get(e)).filter(e=>e!==void 0&&e.#U()===this)}#N(e){for(const t of this.#P()){const n=t.#e;t.#r=f(t.#r),t.#a=!0,t.#l(!1,!0,e),n!==null&&(n.matches(":popover-open")&&n.hidePopover(),n.hidden=!0),t.#N(e)}}#$=e=>{this.props.submenu!==!0||e.pointerType==="touch"||(this.#r=f(this.#r),!(this.#t||!g(e.target)||this.#s?.contains(e.target)!==!0||this.#s.matches(":disabled, [aria-disabled=true]"))&&(this.#r=y(this.#o?.ownerDocument.defaultView,fe,()=>{this.#r=void 0,this.#C=!1,this.open(e)})))};#Y=e=>{this.props.submenu!==!0||e.pointerType==="touch"||g(e.relatedTarget)&&this.#o?.contains(e.relatedTarget)===!0||(this.#r=f(this.#r),this.#r=y(this.#o?.ownerDocument.defaultView,be,()=>{this.#r=void 0,this.#l(!1,!0,e)}))};#j(){const e=this.#w;if(e===null)return null;const t=Array.from(e.querySelectorAll(he)).filter(n=>!n.matches(":disabled, [aria-disabled='true']"));return t.length===1?t[0]:t.length>1||e.querySelector(pe)!==null?null:e}#B(){const e=this.#e;return e===null?[]:Array.from(e.querySelectorAll(L)).filter(t=>G(t,e))}#V(){const e=this.#e,t=new Set;if(e!==null)for(const n of Array.from(e.querySelectorAll(R))){const o=n.dataset.cwMenuName??"";n.closest("[role=menu]")!==e||o.length===0||n.getAttribute("aria-checked")!=="true"||(t.has(o)?n.dispatchEvent(new CustomEvent(j,{detail:{name:o}})):t.add(o))}}#Q=e=>{const t=this.#e,n=t?.ownerDocument.activeElement;let o=!1,s=!1;for(const r of e)r.type==="childList"||r.attributeName==="data-cw-menu-name"?o=!0:r.target!==t&&n!==null&&n!==void 0&&r.target.contains(n)&&(s=!0);o&&this.#V(),s&&this.#t&&t!==null&&n!==null&&n!==void 0&&n!==t&&n.closest("[role=menu]")===t&&!G(n,t)&&this.#X()};#X(e=!1){const t=this.#B(),n=(e?t[t.length-1]:t[0])??this.#e;queueMicrotask(()=>{this.#t&&!this.#a&&n?.focus()})}#Z(e){e.getAttribute("aria-haspopup")==="menu"&&e.removeAttribute("aria-haspopup"),e.getAttribute("aria-controls")===(this.#e?.id??this.#m)&&e.removeAttribute("aria-controls"),e.getAttribute("aria-expanded")===(this.#t?"true":"false")&&e.removeAttribute("aria-expanded")}#J(){const e=this.#w,t=this.#j();this.#s!==null&&this.#s!==t&&this.#Z(this.#s),e!==null&&t!==e&&e.dataset.cwMenuFallbackTrigger==="true"&&(e.removeAttribute("role"),e.removeAttribute("tabindex"),delete e.dataset.cwMenuFallbackTrigger),this.#s=t,t!==null&&(t===e&&!t.matches(me)&&(t.hasAttribute("role")||t.setAttribute("role","button"),t.hasAttribute("tabindex")||t.setAttribute("tabindex","0"),t.dataset.cwMenuFallbackTrigger="true"),t.hasAttribute("aria-haspopup")||t.setAttribute("aria-haspopup","menu"),t.hasAttribute("aria-controls")||t.setAttribute("aria-controls",this.#e?.id??this.#m),t.hasAttribute("aria-expanded")||t.setAttribute("aria-expanded",this.#t?"true":"false"))}#ee(){const e=this.#e;if(e!==null){e.hidden=!1,this.#W(),this.#F(),this.#C&&this.#X(this.#S),this.#C=!0,this.#S=!1;for(const t of this.#P())t.#a=!1,t.#t&&t.#l(!0,!1)}}#te(e){const t=this.#e;t!==null&&(this.#_(),this.#H()&&t.matches(":popover-open")&&(this.#y=!0,t.hidePopover(),this.#y=!1),t.hidden=!0,e&&queueMicrotask(()=>this.#s?.focus()))}#l(e,t,n){const o=this.#e,s=e!==this.#t,r=o?.ownerDocument.activeElement;if(t&&this.#i){this.#q(e,n);return}if(!(!s&&(o===null||!this.#H()&&o.hidden===!e))){if(e){const a=this.#U();if(this.#a=a!==void 0&&(!a.#t||a.#a),a!==void 0&&!this.#a)for(const c of a.#P())c!==this&&c.#l(!1,!0,n)}else this.#N(n);this.#t=e,this.#d(e),e||(this.#x=0),super.setClass("cw-Menu-open",e),this.#J(),this.#s?.setAttribute("aria-expanded",e?"true":"false"),e&&!this.#a?this.#ee():this.#te(s&&r!==null&&r!==void 0&&o?.contains(r)===!0),this.#O(e&&!this.#a),t&&s&&this.#D(e,n)}}#ne=e=>{const t=this.#s;this.#A.add(e),!(e.defaultPrevented||t===null||!g(e.target)||!t.contains(e.target)||t.matches(":disabled, [aria-disabled=true]"))&&k(e,this.#o,()=>{this.#S=!1,this.#C=!0,this.#l(!this.#t,!0,e)},!1)};#R=e=>{const t=this.#o;this.#O(this.#t&&!this.#a),!(this.#A.has(e)||t===null||!g(e.target)||e.target.ownerDocument!==this.#v)&&(this.#A.add(e),!e.defaultPrevented&&this.#t&&!e.composedPath().includes(t)&&this.#l(!1,!0,e))};#ie=e=>{const t=this.#o;if(e.defaultPrevented||J.has(e)||t===null||!g(e.target))return;const n=this.#s?.contains(e.target)===!0,o=t.ownerDocument.defaultView?.getComputedStyle(t).direction==="rtl",s=o?"ArrowLeft":"ArrowRight",r=o?"ArrowRight":"ArrowLeft",a=this.props.submenu===!0,l=this.props.orientation==="horizontal"?["ArrowLeft","ArrowRight"]:["ArrowDown","ArrowUp"],m=n&&(e.key==="Enter"||e.key===" "||(a?e.key===s:e.key==="ArrowDown"||e.key==="ArrowUp")),v=this.#t&&e.target.closest("[role=menu]")===this.#e&&(["Escape","Home","End","Enter"," ",...l].includes(e.key)||a&&e.key===r||e.key.length===1&&!e.altKey&&!e.ctrlKey&&!e.metaKey);!m&&!v||(J.add(e),k(e,t,()=>{if(!m){e.key==="Escape"||a&&e.key===r?this.close(e):this.#se(e);return}this.#s===null||this.#s.matches(":disabled, [aria-disabled=true]")||(this.#C=!0,this.#S=e.key==="ArrowUp",this.#t?this.#X(this.#S):this.open(e))}))};#oe(){this.#f=f(this.#f),this.#f=y(this.#e?.ownerDocument.defaultView,Ee,()=>{this.#p="",this.#f=void 0})}#se(e){const t=this.#e,n=this.#o;if(!this.#t||t===null||n===null||!g(e.target))return;const o=this.#B(),s=e.target.closest(L);if(s===null||s.closest("[role=menu]")!==t)return;const r=o.indexOf(s),a=this.props.loopFocus!==!1,c=this.props.orientation==="horizontal",l=n.ownerDocument.defaultView?.getComputedStyle(n).direction==="rtl",m=c?l?"ArrowLeft":"ArrowRight":"ArrowDown",v=c?l?"ArrowRight":"ArrowLeft":"ArrowUp",p=e.key,M=o.length-1,w=p===m?a?(r+1)%o.length:Math.min(M,r+1):p===v?a?(r+M)%o.length:Math.max(0,r-1):p==="Home"?0:p==="End"?M:-1;if(p==="Enter"||p===" "){e.preventDefault(),s.click();return}if(w<0&&p.length===1&&!e.altKey&&!e.ctrlKey&&!e.metaKey){const h=p.toLocaleLowerCase(),b=this.#p.length>0&&Array.from(this.#p).every(E=>E===h),S=r+1,P=o.slice(S).concat(o.slice(0,S));this.#p=b?h:this.#p+h;const u=P.find(E=>Me(E).startsWith(this.#p));u!==void 0&&(e.preventDefault(),u.focus()),this.#oe();return}o[w]!==void 0&&(e.preventDefault(),o[w].focus())}#re=e=>{!this.#t||g(e.relatedTarget)&&this.#o?.contains(e.relatedTarget)===!0||queueMicrotask(()=>{const t=this.#o;this.#t&&t!==null&&!t.contains(t.ownerDocument.activeElement)&&this.#l(!1,!0,e)})};#O(e){const t=this.#o,n=e?t?.getRootNode():void 0,o=n?.nodeType===11&&"host"in n?n:void 0,s=e&&t?.ownerDocument.defaultView!=null?t.ownerDocument:void 0;o!==this.#k&&(this.#k?.removeEventListener("click",this.#R),this.#k=o,this.#k?.addEventListener("click",this.#R)),s!==this.#v&&(this.#v?.removeEventListener("click",this.#R),this.#v?.removeEventListener("scroll",this.#I,!0),this.#v?.defaultView?.removeEventListener("resize",this.#I),this.#v=s,s?.addEventListener("click",this.#R),s?.addEventListener("scroll",this.#I,!0),s?.defaultView?.addEventListener("resize",this.#I))}#ae=e=>{const t=e.detail;if(!(!g(e.target)||this.#e?.contains(e.target)!==!0)){if(t?.close===!1||this.props.closeOnSelect===!1){e.stopPropagation();return}this.close(e)}};#le=e=>{const t=this.#e;if(this.#y||this.#a||t===null)return;const n="newState"in e?e.newState:void 0,o=n===void 0?t.matches(":popover-open"):n==="open";if(o!==this.#t){if(!this.#i){this.#l(o,!1,e),this.#D(o,e);return}this.#q(o,e),queueMicrotask(()=>{this.#y=!0;try{this.#t?t.showPopover():t.hidePopover()}catch{t.hidden=!this.#t}this.#y=!1})}};#ue=e=>{if(!(e.target!==this.#e||e.propertyName!=="transform"||!this.#t))for(const t of this.#P())t.#t&&t.#I()};#z(){const e=this.#o?.ownerDocument.defaultView;e!=null&&(this.#E===void 0&&this.#w!==null&&(this.#E=new e.MutationObserver(()=>this.#J()),this.#E.observe(this.#w,{attributeFilter:["aria-disabled","disabled","role","tabindex"],attributes:!0,childList:!0,subtree:!0})),this.#g===void 0&&this.#e!==null&&(this.#g=new e.MutationObserver(this.#Q),this.#g.observe(this.#e,{attributeFilter:["aria-hidden","class","data-cw-menu-name","hidden","inert","style"],attributes:!0,childList:!0,subtree:!0})))}#G(e,t,n){const o=n?"addEventListener":"removeEventListener";e?.[o]("click",this.#ne),e?.[o]("keydown",this.#ie),e?.[o]("focusout",this.#re),e?.[o]("pointerover",this.#$),e?.[o]("pointerout",this.#Y),e?.[o]($,this.#ae),t?.[o]("toggle",this.#le),t?.[o]("transitionend",this.#ue)}applyComponentProps(){const e=super.readProps(["color","id","label","modal","open","orientation","placement","submenu","variant"]),t=this.#e,n=this.#n["attr:aria-label"]??e.label??"Menu";if(e.variantChanged&&(super.setAttribute("data-cw-menu-variant",e.variant??"baseline"),super.setClass(Q,Z(e.variant))),e.colorChanged&&super.setAttribute("data-cw-menu-color",e.color??"standard"),e.orientationChanged&&(super.setAttribute("data-cw-menu-orientation",e.orientation??"vertical"),t?.setAttribute("aria-orientation",e.orientation??"vertical")),e.submenuChanged&&super.setClass("cw-SubMenu",e.submenu===!0),e.placementChanged&&(super.setClass("placement",`_cw-Menu-${e.placement??"bottom-start"}`),this.#I()),e.idChanged){const o=e.id??this.#m;t!==null&&(this.#s?.getAttribute("aria-controls")===t.id&&this.#s.setAttribute("aria-controls",o),t.id=o),this.#u(o)}(e.modalChanged||e.submenuChanged)&&t!==null&&t.setAttribute("popover",e.submenu===!0||e.modal===!1?"manual":"auto"),t!==null&&t.getAttribute("aria-label")!==n&&t.setAttribute("aria-label",n),e.openChanged&&this.#i&&(this.#L=void 0,this.#c=f(this.#c),this.#l(e.open===!0,!1))}onStyleElementChanged(e){const t=e;this.#G(this.#o,this.#e,!1),this.#O(!1),this.#_(),this.#r=f(this.#r),this.#E?.disconnect(),this.#g?.disconnect(),this.#E=void 0,this.#g=void 0,this.#o!==null&&C.delete(this.#o),super.onStyleElementChanged(e),this.#o=t,this.#w=t?.querySelector(":scope > [data-cw-menu-trigger]")??null,this.#e=t?.querySelector(":scope > [data-cw-menu-popup]")??null,t!==null&&(C.set(t,this),this.#G(t,this.#e,!0),this.#z(),this.#J(),this.#V(),this.#t?this.#l(!0,!1):(this.#e?.setAttribute("hidden",""),this.#N()))}render(e){const t=this.props,n=this.#n;return this.#m===""&&(this.#m=A(),this.#u(this.#m)),d(()=>ee({"aria-label":n["attr:aria-label"],children:e},{color:t.color,label:t.label,modal:t.modal,open:this.#t,orientation:t.orientation,placement:t.placement,submenu:t.submenu,get trigger(){return t.trigger},variant:t.variant},{menuId:this.#M,open:this.#h}))}#de(){this.#f=f(this.#f),this.#c=f(this.#c),this.#T=f(this.#T),this.#r=f(this.#r),this.#_(),this.#E?.disconnect(),this.#g?.disconnect(),this.#G(this.#o,this.#e,!1),this.#O(!1),this.#o!==null&&C.delete(this.#o)}}const Te=U(()=>ee,()=>Se),Ie=i=>{const e=new Set,t={claimRadio:n=>n.length===0||e.has(n)?n.length===0:(e.add(n),!0),variant:d(()=>i.variant),color:d(()=>i.color)};return oe(x.Provider,{value:t,get children(){return d(()=>Te(ce(i,["children","trigger"],["trigger"])))}})},We=i=>{const e=O(x),t=re({placement:"inline-end"},i,{color:e?.color,submenu:!0,variant:e?.variant});return Ie(t)};function _(i,e){return<>
|
|
5
|
+
<span class="cw-MenuItem-leading">{i.leading}</span>
|
|
6
|
+
<span class="cw-MenuItem-content">
|
|
7
|
+
<span class="cw-MenuItem-label">{i.label??e}</span>
|
|
8
|
+
<span class="cw-MenuItem-supporting">{i.supportingText}</span>
|
|
9
|
+
</span>
|
|
10
|
+
<span class="cw-MenuItem-trailing">{i.trailing}</span>
|
|
11
|
+
<span class="cw-MenuItem-badge">{i.badge}</span>
|
|
12
|
+
</>}function N(i,e,t,n){const o=O(x),s=t==="menuitemradio"&&n===!0&&e.name!==void 0?o?.claimRadio(e.name)===!0:n===!0;return<div{...i}aria-checked={t==="menuitem"?void 0:s?"true":"false"}aria-disabled={e.disabled===!0?"true":void 0}classList={{...i.classList,"cw-MenuItem":!0,"cw-MenuItem-checked":s,"cw-MenuItem-disabled":e.disabled===!0}}data-cw-menu-close={e.closeOnSelect===!1?"false":void 0}data-cw-menu-item="true"data-cw-menu-name={e.name}data-cw-menu-value={e.value}role={t}tabIndex={e.tabIndex??-1}>{_(e,i.children)}</div>}class te extends de{itemRole;#n;constructor(e,t="menuitem"){super(e,{baseInteractionCssClassName:"cw-MenuItem",enabledInteractionStates:X,styleElementIsFunction:!0}),this.itemRole=t,this.#n=null,W(()=>this.#u(this.#n,!1))}onRadioUncheck(e){}onRadioNormalize(e){}activate(e){this.props.disabled===!0||e.defaultPrevented||(d(()=>this.props.onSelect?.(e)),!e.defaultPrevented&&this.#n?.dispatchEvent(new CustomEvent($,{bubbles:!0,detail:{close:this.props.closeOnSelect??this.itemRole!=="menuitemcheckbox"}})))}#i=e=>{const t=this.#n;t!==null&&g(e.target)&&e.target.closest("[data-cw-menu-item]")===t&&t.getAttribute("aria-haspopup")!=="menu"&&k(e,t,()=>this.activate(e),!1)};#h=e=>{const t=this.#n;t!==null&&(e.key==="Enter"||e.key===" ")&&t.closest("[role=menu]")===null&&k(e,t,()=>t.click())};#d=e=>this.onRadioUncheck(e);#M=e=>this.onRadioNormalize(e);#u(e,t){const n=t?"addEventListener":"removeEventListener";e?.[n]("click",this.#i),e?.[n]("keydown",this.#h),e?.[n](Y,this.#d),e?.[n](j,this.#M)}applyComponentProps(){const e=super.readProps(["closeOnSelect","disabled","name","tabIndex","value"]);e.disabledChanged&&(super.setClass("cw-MenuItem-disabled",e.disabled===!0),super.setAttribute("aria-disabled",e.disabled===!0?"true":void 0),this.setEnabledInteractionStates(e.disabled===!0?z:X)),e.tabIndexChanged&&super.setAttribute("tabindex",e.tabIndex??-1),e.valueChanged&&super.setAttribute("data-cw-menu-value",e.value),e.nameChanged&&super.setAttribute("data-cw-menu-name",e.name),e.closeOnSelectChanged&&super.setAttribute("data-cw-menu-close",e.closeOnSelect===!1?"false":void 0)}onStyleElementChanged(e){this.#u(this.#n,!1),super.onStyleElementChanged(e),this.#n=e,this.#u(this.#n,!0)}render(e){const t=<div class="cw-MenuItem"data-cw-menu-item="true"role={this.itemRole}tabIndex={-1}/>;return F(t,_(this.props,e)),t}}const Ke=H(()=>(i,e)=>N(i,e,"menuitem"),()=>te);class ne extends te{#n;#i;constructor(e,t="menuitemcheckbox"){const n=d(()=>e.name)??"";super(e,t),this.#n="checked"in e,this.#i=d(()=>this.#n?e.checked:e.defaultChecked)===!0,t==="menuitemradio"&&this.#i&&n.length>0&&(this.#i=O(x)?.claimRadio(n)===!0)}#h(e,t){d(()=>this.props.onCheckedChange?.(e,t))}#d(e){this.#i=e,super.setAttribute("aria-checked",e?"true":"false"),super.setClass("cw-MenuItem-checked",e)}activate(e){const t=this.itemRole==="menuitemradio"?!0:!this.#i;if(this.props.disabled!==!0){if(t!==this.#i){if(this.#h(t,e),e.defaultPrevented)return;this.#n||this.#d(t)}this.itemRole==="menuitemradio"&&this.#i&&this.#M(),super.activate(e)}}#M(){const e=super.styleElement,t=e?.dataset.cwMenuName??"",n=e?.closest("[role=menu]");if(!(e===null||t.length===0||n===null||n===void 0))for(const o of Array.from(n.querySelectorAll(R)))o!==e&&o.closest("[role=menu]")===n&&(o.dataset.cwMenuName??"")===t&&o.dispatchEvent(new CustomEvent(Y,{detail:{name:t}}))}#u(e){const t=super.styleElement,n=e.detail;return this.itemRole==="menuitemradio"&&t!==null&&(t.dataset.cwMenuName??"")===(n.name??"")}onRadioUncheck(e){this.#u(e)&&(this.#n?this.#i&&this.#h(!1,e):this.#d(!1))}onRadioNormalize(e){!this.#n&&this.#u(e)&&this.#d(!1)}onStyleElementChanged(e){const t=d(()=>this.props.name)??"",n=e?.closest("[role=menu]");if(super.onStyleElementChanged(e),e===null||n===null||n===void 0||t.length===0||this.itemRole!=="menuitemradio"||this.#n||!this.#i)return;const o=Array.from(n.querySelectorAll(R)).filter(r=>r.closest("[role=menu]")===n),s=o.indexOf(e);s>0&&o.slice(0,s).some(r=>(r.dataset.cwMenuName??"")===t&&r.getAttribute("aria-checked")==="true")&&this.#d(!1)}applyComponentProps(){const e=super.readProps(["checked"]);super.applyComponentProps(),e.checkedChanged&&this.#n&&(this.#i=e.checked===!0),super.setAttribute("aria-checked",this.#i?"true":"false"),super.setClass("cw-MenuItem-checked",this.#i)}render(e){const t=<div aria-checked={this.#i?"true":"false"}class="cw-MenuItem"data-cw-menu-item="true"data-cw-menu-name={d(()=>this.props.name)}role={this.itemRole}tabIndex={-1}/>;return F(t,_(this.props,e)),t}}const Fe=H(()=>(i,e)=>N(i,e,"menuitemcheckbox","checked"in e?e.checked:e.defaultChecked),()=>ne);class Le extends ne{constructor(e){super(e,"menuitemradio")}}const Ue=H(()=>(i,e)=>N(i,e,"menuitemradio","checked"in e?e.checked:e.defaultChecked),()=>Le);function ie(i,e){return<div aria-hidden="true"class="cw-MenuGroup-label"hidden={i===void 0}id={e}>{i}</div>}function ke(i,e){const t=A(),n=ie(e.label,t);return<div{...i}aria-labelledby={e.label===void 0?void 0:t}classList={{...i.classList,"cw-MenuGroup":!0,[D]:!0}}role="group">{n}{i.children}</div>}class Ae extends B{#n;constructor(e){super(e,{styleElementIsFunction:!0}),this.#n=null}applyComponentProps(){const e=super.readProps(["label"]),t=this.#n;!e.labelChanged||t===null||(t.textContent=e.label??"",t.hidden=e.label===void 0,super.setAttribute("aria-labelledby",e.label===void 0?void 0:t.id))}onStyleElementChanged(e){super.onStyleElementChanged(e),this.#n=e?.querySelector(":scope > .cw-MenuGroup-label")??null}render(e){const t=ie(void 0,A());return<div class={`cw-MenuGroup ${D}`}role="group">{t}{e}</div>}}const Be=U(()=>ke,()=>Ae);export{Ie as Menu,Fe as MenuCheckboxItem,ne as MenuCheckboxItemController,Se as MenuController,Be as MenuGroup,Ae as MenuGroupController,Ke as MenuItem,te as MenuItemController,Ue as MenuRadioItem,Le as MenuRadioItemController,We as SubMenu};
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import{createSignal as b,getOwner as C,onCleanup as E}from"solid-js";import{isServer as L}from"solid-js/web";import{defineDomComponent as i}from"..";import{DomController as d}from"../dom/client";import{resolveSurfaceSlots as r}from"./slots";import"./surface.css";const c=[[600,"medium"],[840,"expanded"],[1200,"large"],[1600,"extraLarge"]],f=["bottomBar","bottomSheet","children","content","floatingActionButton","snackbarHost","topBar"],p=["children","detail","extra","list","main","supporting"],S="--_cw-Scaffold-sheetPeekHeight";function W(t){let e="compact";for(const[o,a]of c)t>=o&&(e=a);return e}function I(t=L?void 0:window){const e=t===void 0?[]:c.map(([n])=>t.matchMedia(`(min-width: ${n}px)`)),o=()=>{const n=e.filter(y=>y.matches).length;return n===0?"compact":c[n-1][1]},[a,h]=b(o()),l=()=>{h(o())};for(const n of e)n.addEventListener("change",l);return C()!==null&&E(()=>{for(const n of e)n.removeEventListener("change",l)}),a}function m(t){return typeof t!="number"?t:Number.isFinite(t)?`${Math.max(0,t)}px`:void 0}function u(t){return`_cw-Scaffold-fab-${t??"end"}`}function P(t,e,o){return<div{...e}classList={{...e.classList,[u(o.floatingActionButtonPosition)]:!0,[t]:!0,"cw-Scaffold":!0,"cw-Scaffold-safeArea":o.safeArea===!0}}style={{...e.style,[S]:m(o.sheetPeekHeight)}}>
|
|
2
|
+
<div class="cw-Scaffold-topBar">{o.topBar}</div>
|
|
3
|
+
<div aria-label={o.contentLabel}class="cw-Scaffold-content"role={o.contentRole}tabIndex={0}>{o.content??e.children}</div>
|
|
4
|
+
<div class="cw-Scaffold-bottomBar">{o.bottomBar}</div>
|
|
5
|
+
<div class="cw-Scaffold-layer">
|
|
6
|
+
<div class="cw-Scaffold-overlay">
|
|
7
|
+
<div class="cw-Scaffold-snackbar">{o.snackbarHost}</div>
|
|
8
|
+
<div class="cw-Scaffold-fab">{o.floatingActionButton}</div>
|
|
9
|
+
</div>
|
|
10
|
+
<div class="cw-Scaffold-sheet">{o.bottomSheet}</div>
|
|
11
|
+
</div>
|
|
12
|
+
</div>}class v extends d{#t;#e;constructor(e,o="cw-Scaffold"){super(e,{styleElementIsFunction:!0}),this.#t=o,this.#e=null}#o(){const e=this.#e,o=this.props.contentRole,a=this.props.contentLabel;o===void 0?e?.removeAttribute("role"):e?.setAttribute("role",o),a===void 0?e?.removeAttribute("aria-label"):e?.setAttribute("aria-label",a)}applyComponentProps(){const e=super.readProps(["contentLabel","contentRole","floatingActionButtonPosition","safeArea","sheetPeekHeight"]);(e.contentLabelChanged||e.contentRoleChanged)&&this.#o(),e.floatingActionButtonPositionChanged&&super.setClass("fabPosition",u(e.floatingActionButtonPosition)),e.safeAreaChanged&&super.setClass("cw-Scaffold-safeArea",e.safeArea===!0),e.sheetPeekHeightChanged&&super.setStyle(S,m(e.sheetPeekHeight))}onStyleElementChanged(e){super.onStyleElementChanged(e),this.#e=e?.querySelector(":scope > .cw-Scaffold-content")??null,this.#o()}render(e){const o=this.props;return<div class={`cw-Scaffold ${this.#t}`}>
|
|
13
|
+
<div class="cw-Scaffold-topBar">{o.topBar}</div>
|
|
14
|
+
<div class="cw-Scaffold-content"tabIndex={0}>{o.content??e}</div>
|
|
15
|
+
<div class="cw-Scaffold-bottomBar">{o.bottomBar}</div>
|
|
16
|
+
<div class="cw-Scaffold-layer">
|
|
17
|
+
<div class="cw-Scaffold-overlay">
|
|
18
|
+
<div class="cw-Scaffold-snackbar">{o.snackbarHost}</div>
|
|
19
|
+
<div class="cw-Scaffold-fab">{o.floatingActionButton}</div>
|
|
20
|
+
</div>
|
|
21
|
+
<div class="cw-Scaffold-sheet">{o.bottomSheet}</div>
|
|
22
|
+
</div>
|
|
23
|
+
</div>}}const D=i(()=>(t,e)=>P("cw-Scaffold",t,e),()=>v),N=t=>D(r(t,f));class x extends v{constructor(e){super(e,"cw-BottomSheetScaffold")}}const B=i(()=>(t,e)=>P("cw-BottomSheetScaffold",t,e),()=>x),$=t=>B(r(t,f));function s(t){return`_cw-PaneScaffold-active-${t}`}function w(t){return t==="detail"?"primary":t==="extra"?"tertiary":"secondary"}function g(t){return t==="supporting"?"secondary":t==="extra"?"tertiary":"primary"}function A(t,e){return<div{...t}classList={{...t.classList,[s(w(e.activePane))]:!0,"cw-ListDetailPaneScaffold":!0,"cw-PaneScaffold":!0}}>
|
|
24
|
+
<div class="cw-PaneScaffold-pane _cw-PaneScaffold-secondary">{e.list}</div>
|
|
25
|
+
<div class="cw-PaneScaffold-pane _cw-PaneScaffold-primary">
|
|
26
|
+
{e.detail??t.children}
|
|
27
|
+
</div>
|
|
28
|
+
<div class="cw-PaneScaffold-pane _cw-PaneScaffold-tertiary">{e.extra}</div>
|
|
29
|
+
</div>}class J extends d{constructor(e){super(e,{styleElementIsFunction:!0})}applyComponentProps(){const e=super.readProps(["activePane"]);e.activePaneChanged&&super.setClass("activePane",s(w(e.activePane)))}render(e){const o=this.props;return<div class="cw-PaneScaffold cw-ListDetailPaneScaffold">
|
|
30
|
+
<div class="cw-PaneScaffold-pane _cw-PaneScaffold-secondary">{o.list}</div>
|
|
31
|
+
<div class="cw-PaneScaffold-pane _cw-PaneScaffold-primary">
|
|
32
|
+
{o.detail??e}
|
|
33
|
+
</div>
|
|
34
|
+
<div class="cw-PaneScaffold-pane _cw-PaneScaffold-tertiary">{o.extra}</div>
|
|
35
|
+
</div>}}const X=i(()=>A,()=>J),q=t=>X(r(t,p));function H(t,e){return<div{...t}classList={{...t.classList,[s(g(e.activePane))]:!0,"cw-PaneScaffold":!0,"cw-SupportingPaneScaffold":!0}}>
|
|
36
|
+
<div class="cw-PaneScaffold-pane _cw-PaneScaffold-primary">
|
|
37
|
+
{e.main??t.children}
|
|
38
|
+
</div>
|
|
39
|
+
<div class="cw-PaneScaffold-pane _cw-PaneScaffold-secondary">{e.supporting}</div>
|
|
40
|
+
<div class="cw-PaneScaffold-pane _cw-PaneScaffold-tertiary">{e.extra}</div>
|
|
41
|
+
</div>}class _ extends d{constructor(e){super(e,{styleElementIsFunction:!0})}applyComponentProps(){const e=super.readProps(["activePane"]);e.activePaneChanged&&super.setClass("activePane",s(g(e.activePane)))}render(e){const o=this.props;return<div class="cw-PaneScaffold cw-SupportingPaneScaffold">
|
|
42
|
+
<div class="cw-PaneScaffold-pane _cw-PaneScaffold-primary">
|
|
43
|
+
{o.main??e}
|
|
44
|
+
</div>
|
|
45
|
+
<div class="cw-PaneScaffold-pane _cw-PaneScaffold-secondary">{o.supporting}</div>
|
|
46
|
+
<div class="cw-PaneScaffold-pane _cw-PaneScaffold-tertiary">{o.extra}</div>
|
|
47
|
+
</div>}}const k=i(()=>H,()=>_),j=t=>k(r(t,p));export{$ as BottomSheetScaffold,q as ListDetailPaneScaffold,J as ListDetailPaneScaffoldController,N as Scaffold,v as ScaffoldController,j as SupportingPaneScaffold,_ as SupportingPaneScaffoldController,I as createWindowSizeClass,W as windowSizeClassOf};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import{untrack as b}from"solid-js";import{defineDomComponent as L}from"..";import{ELEVATION_SHADOW_CSS_CLASS as c}from"../container/elevation-shadow";import{DomController as k}from"../dom/client";import{applySpringMotion as _}from"../motion/spring";import{VelocityTracker as I}from"../motion/velocity";import{computedStyleOf as E,ownerWindow as v}from"../navigation/base";import{deferAfterDelegatedCancellation as y}from"../util/event";import{DialogController as A,activeElementOf as p,dialogAttributesOf as R,isInitiallyOpen as B}from"./dialog";import{coalescedEventsOf as N}from"./drag";import{isElementNode as u}from"./interactive";import{resolveSurfaceSlots as x}from"./slots";import"../container/elevation-shadow.css";import"./surface.css";const X=8,F=40,Y=56,g=125,G=8e3,S=125,h="cw-BottomSheet-dragging",M="_cw-BottomSheet-tracking",l="_cw-ModalBottomSheet-hiding",m="cw-BottomSheet-noDragHandle",f="--_cw-BottomSheet-offset",C="--_cw-BottomSheet-height",J=.4,D="--_cw-BottomSheet-peekHeight",q="input, textarea, select, [contenteditable]:not([contenteditable=false])";function H(i){return typeof i!="number"?i:Number.isFinite(i)?`${Math.max(0,i)}px`:void 0}function V(i,e){for(let t=i;t!==null&&t!==e;t=t.parentElement){const s=E(t).overflowY;if(t.scrollHeight>t.clientHeight&&(s==="auto"||s==="scroll"))return t}return null}function d(i,e,t){let s=i[0]??0,n=1/0;for(const o of i){const r=t===0?Math.abs(o-e):(o-e)*t;r>=0&&r<n&&(s=o,n=r)}return s}function P(i,e,t){const s=Math.sign(t);if(s===0)return d(i,e,0);if(Math.abs(t)>=g)return d(i,e,s);const n=d(i,e,-s);return Math.abs(e-n)<Y?n:d(i,e,s)}function $(i,e,t){const s=Math.max(0,t-e);if(i<=0||s>=S)return i;const n=s/S,o=i*n*n;return i>=g?Math.max(o,g):o}class w{#t;#s;#e;#o;#a;#n;#r;#i;#l;#c;#m;#d;#h;constructor(e){this.#t=e,this.#s=new I,this.#e=null,this.#o=null,this.#a=void 0,this.#n=void 0,this.#r=0,this.#i=0,this.#l=0,this.#c=!1,this.#m=!1,this.#d=null,this.#h=!1}attach(e,t){this.reset(),this.#e?.removeEventListener("touchstart",this.#L),this.#e?.removeEventListener("touchmove",this.#b),this.#e?.removeEventListener("touchend",this.#g),this.#e?.removeEventListener("touchcancel",this.#g),this.#e?.removeEventListener("wheel",this.#y),this.#o?.removeEventListener("pointerdown",this.#v),this.#o?.removeEventListener("pointermove",this.#u),this.#o?.removeEventListener("pointerup",this.#E),this.#o?.removeEventListener("pointercancel",this.#E),this.#o?.removeEventListener("lostpointercapture",this.#E),this.#e=e,this.#o=t,e?.addEventListener("touchstart",this.#L,{passive:!0}),e?.addEventListener("touchmove",this.#b,{passive:!1}),e?.addEventListener("touchend",this.#g),e?.addEventListener("touchcancel",this.#g),e?.addEventListener("wheel",this.#y,{passive:!1}),t?.addEventListener("pointerdown",this.#v),t?.addEventListener("pointermove",this.#u),t?.addEventListener("pointerup",this.#E),t?.addEventListener("pointercancel",this.#E),t?.addEventListener("lostpointercapture",this.#E)}consumeClick(){const e=this.#h;return this.#h=!1,e}reset(){const e=this.#a;this.#a=void 0,this.#n=void 0,this.#c=!1,this.#m=!1,this.#d=null,this.#s.resetTracking(),e!==void 0&&this.#o?.hasPointerCapture(e)===!0&&this.#o.releasePointerCapture(e)}#C(e,t){this.#r=t,this.#i=0,this.#l=e,this.#s.resetTracking(),this.#s.addDataPoint(e,t)}#f(e,t){if(this.#i=t-this.#r,this.#l=e,this.#s.addDataPoint(e,t),!this.#c){if(Math.abs(this.#i)<X)return;this.#c=!0,this.#t.dragStarted()}this.#t.dragMoved(this.#i)}#p(e,t){const s=this.#c;let n=0;s&&t&&e.timeStamp-this.#l<=F&&(n=this.#s.calculateVelocity(G)),this.reset(),s&&this.#t.dragEnded(this.#i,n,e)}#v=e=>{this.#h=!1,!(!e.isPrimary||e.pointerType==="mouse"&&e.button!==0||this.#a!==void 0||this.#n!==void 0||!this.#t.canDrag())&&(this.#a=e.pointerId,this.#C(e.timeStamp,e.clientY),this.#o?.setPointerCapture(e.pointerId))};#u=e=>{if(e.pointerId===this.#a){for(const t of N(e).slice(0,-1))this.#s.addDataPoint(t.timeStamp,t.clientY);this.#f(e.timeStamp,e.clientY)}};#E=e=>{const t=e.type==="pointerup";e.pointerId===this.#a&&(this.#h=this.#c&&t,this.#p(e,t))};#L=e=>{const t=e.changedTouches[0],s=e.target;t===void 0||e.touches.length!==1||this.#a!==void 0||this.#n!==void 0||this.#e===null||!u(s)||this.#o?.contains(s)===!0||s.closest(q)!==null||!this.#t.canDrag()||(this.#n=t.identifier,this.#m=!1,this.#d=V(s,this.#e),this.#C(e.timeStamp,t.clientY))};#b=e=>{const t=Array.from(e.changedTouches).find(s=>s.identifier===this.#n);if(t!==void 0){if(!this.#m){const s=t.clientY-this.#r,n=this.#d;if(s===0)return;if(this.#m=!0,!e.cancelable||n!==null&&(s>0?n.scrollTop>0:!this.#t.canExpand())){this.reset();return}}e.preventDefault(),this.#f(e.timeStamp,t.clientY)}};#g=e=>{Array.from(e.changedTouches).some(t=>t.identifier===this.#n)&&this.#p(e,e.type==="touchend")};#y=e=>{e.deltaY<=0||e.ctrlKey||e.defaultPrevented||this.#c||!this.#t.canDrag()||!this.#t.canExpand()||(e.preventDefault(),this.#t.expand(e))}}class T{#t;#s;#e;constructor(){this.#t=null,this.#s=void 0,this.#e=void 0}attach(e){this.clear(),this.#t=e}track(e,t){this.#t?.style.setProperty(C,`${e}`),this.set(t)}set(e){this.#t?.style.setProperty(f,`${e}`)}interrupt(){const e=this.#s;return this.#s=void 0,this.#e=void 0,e?.cancel(),e?.value}settle(e,t,s,n){const o=this.#t;if(this.interrupt(),o===null){n();return}const r=_(o,f,e,t,{role:"spatial",speed:"default",threshold:J,velocity:s});this.#s=r,this.#e=n,r.finished.then(()=>this.#o(r),()=>{})}retarget(e){this.#s?.playState==="running"&&this.#s.retarget(e)}clear(){this.interrupt(),this.#t?.style.removeProperty(f),this.#t?.style.removeProperty(C)}#o(e){const t=this.#e,s=this.#t;e===this.#s&&(this.#s=void 0,this.#e=void 0,s!==null&&E(s).getPropertyValue("translate"),t?.())}}function z(i,e){const t=e.skipPartiallyExpanded===!0;return<dialog{...R(i,e,{classes:{[c]:!0,[m]:e.dragHandle===!1,"cw-ModalBottomSheet":!0,"cw-ModalBottomSheet-expanded":t,"cw-ModalBottomSheet-open":B(e)},label:"Bottom sheet",role:"dialog"})}>
|
|
2
|
+
<section class="cw-BottomSheet-surface"tabIndex={-1}>
|
|
3
|
+
<button aria-label={t?e.closeLabel??"Close bottom sheet":e.expandLabel??"Expand bottom sheet"}class="cw-BottomSheet-dragHandle"data-cw-sheet-handle="true"type="button">{e.dragHandleContent}</button>
|
|
4
|
+
<div class="cw-BottomSheet-content">{i.children}</div>
|
|
5
|
+
</section>
|
|
6
|
+
</dialog>}class W extends A{#t;#s;#e;#o;#a;#n;#r;#i;#l;#c;#m;#d;constructor(e){super(e,"cw-ModalBottomSheet"),this.#t=super.consumeProps([],["onDismiss"]).onDismiss,this.#e=new T,this.#o=void 0,this.#a=null,this.#n=b(()=>e.skipPartiallyExpanded===!0),this.#r=!1,this.#i=!1,this.#l=void 0,this.#c=0,this.#m=0,this.#d=[],this.#s=new w({canDrag:()=>this.isOpen(),canExpand:()=>!this.#n&&this.#f()>0,dragEnded:(t,s,n)=>this.#x(t,s,n),dragMoved:t=>this.#y(t),dragStarted:()=>this.#g(),expand:()=>this.#u(!0)})}defaultLabel(){return this.props.label??"Bottom sheet"}allowDismiss(e,t){return this.props.dismissible===!1?!1:(this.#t?.(t),t?.defaultPrevented!==!0)}requestDismiss(e,t){e==="cancel"&&this.#n&&this.#f()>0?this.#u(!1):super.requestDismiss(e,t)}onOpenStateChanged(e){const t=e?this.#C():void 0;this.#b(),this.#i=e,this.#l=t,e&&(this.#u(this.props.skipPartiallyExpanded===!0,!1),this.#v())}onShown(){const e=this.#l;this.#i&&(this.#i=!1,this.#l=void 0,this.#E(e??this.#h()))}#h(){return this.styleElement?.getBoundingClientRect().height??0}#C(){const e=this.styleElement;return e===null||e.getClientRects().length===0?void 0:e.getBoundingClientRect().top-e.offsetTop}#f(){const e=v(this.styleElement);return this.props.skipPartiallyExpanded===!0||e===void 0?0:Math.max(0,this.#h()-e.innerHeight/2)}#p(){return this.#n?0:this.#f()}#v(){this.isOpen()&&!this.#n&&this.#h()>0&&this.#f()===0&&this.#u(!0,!1)}#u(e,t=!0){let s;t&&!this.#r&&e!==this.#n&&this.isOpen()&&(s=this.#p()),this.#n=e,super.setClass("cw-ModalBottomSheet-expanded",e),this.#a?.setAttribute("aria-label",e?this.props.closeLabel??"Close bottom sheet":this.props.expandLabel??"Expand bottom sheet"),this.#r?this.#e.retarget(this.#p()):s!==void 0&&this.#E(s)}#E(e){const t=this.#h(),s=this.#p();t===0||e===s||(this.#e.track(t,e),this.#L(!0),this.#e.settle(e,s,0,()=>this.#b()))}#L(e){this.#r=e,super.setClass(M,e)}#b(){this.#s.reset(),this.#e.clear(),this.#L(!1),super.setClass(h,!1),super.setClass(l,!1)}#g(){const e=this.#e.interrupt(),t=this.#f();t===0&&!this.#n&&this.#u(!0,!1),this.#m=this.#h(),this.#d=t>0?[0,t,this.#m]:[0,this.#m],this.#c=e??this.#p(),this.#e.track(this.#m,this.#c),this.#L(!0),super.setClass(h,!0),super.setClass(l,!1)}#y(e){this.#e.set(Math.min(Math.max(this.#c+e,0),this.#m))}#x(e,t,s){const n=this.#m,o=Math.min(Math.max(this.#c+e,0),n),r=$(t,o,n),a=P(this.#d,o,r);if(super.setClass(h,!1),a===n&&n>0&&this.allowDismiss("dismiss",s)){super.setClass(l,!0),this.#e.settle(o,n,r,()=>{this.close("dismiss",s),this.isOpen()&&(super.setClass(l,!1),this.#e.settle(n,this.#p(),0,()=>this.#b()))});return}a!==n&&a!==this.#p()&&this.#u(a===0),this.#e.settle(o,this.#p(),r,()=>this.#b())}#S=e=>{const t=this.#a;this.#s.consumeClick()||y(e,t,()=>{this.#a!==t||!this.isOpen()||(!this.#n&&this.#f()>0?this.#u(!0):this.requestDismiss("dismiss",e))},!1)};applyComponentProps(){const e=super.readProps(["closeLabel","dragHandle","expandLabel"]);super.applyComponentProps(),(e.closeLabelChanged||e.expandLabelChanged)&&this.#u(this.#n,!1),e.dragHandleChanged&&super.setClass(m,e.dragHandle===!1)}onStyleElementChanged(e){const t=e===null?void 0:v(e);this.#a?.removeEventListener("click",this.#S),this.#o?.disconnect(),this.#b(),this.#a=e?.querySelector("[data-cw-sheet-handle]")??null,this.#s.attach(e?.querySelector(".cw-BottomSheet-surface")??null,this.#a),this.#e.attach(e),this.#a?.addEventListener("click",this.#S),this.#o=void 0,e!==null&&t?.ResizeObserver!==void 0&&(this.#o=new t.ResizeObserver(()=>this.#v()),this.#o.observe(e)),super.onStyleElementChanged(e)}render(e){const t=this.props;return<dialog class={`cw-ModalBottomSheet ${c}`}>
|
|
7
|
+
<section class="cw-BottomSheet-surface"tabIndex={-1}>
|
|
8
|
+
<button class="cw-BottomSheet-dragHandle"data-cw-sheet-handle="true"type="button">{t.dragHandleContent}</button>
|
|
9
|
+
<div class="cw-BottomSheet-content">{e}</div>
|
|
10
|
+
</section>
|
|
11
|
+
</dialog>}onControllerCleanup(){this.#a?.removeEventListener("click",this.#S),this.#o?.disconnect(),this.#s.attach(null,null),this.#e.attach(null),super.onControllerCleanup()}}const O=["children","dragHandleContent"],K=L(()=>z,()=>W),me=i=>K(x(i,O));function j(i,e){const t=B(e),s=("expanded"in e?e.expanded:e.defaultExpanded)===!0;return<div aria-label={e.label??"Bottom sheet"}{...i}aria-hidden={t?void 0:"true"}classList={{...i.classList,[m]:e.dragHandle===!1,"cw-BottomSheet":!0,"cw-BottomSheet-expanded":s,"cw-BottomSheet-open":t}}role="region"style={{...i.style,[D]:H(e.peekHeight)}}>
|
|
12
|
+
<section class={`cw-BottomSheet-surface ${c}`}tabIndex={-1}>
|
|
13
|
+
<button aria-expanded={s?"true":"false"}aria-label={s?e.collapseLabel??"Collapse bottom sheet":e.expandLabel??"Expand bottom sheet"}class="cw-BottomSheet-dragHandle"data-cw-sheet-handle="true"type="button">{e.dragHandleContent}</button>
|
|
14
|
+
<div class="cw-BottomSheet-content">{i.children}</div>
|
|
15
|
+
</section>
|
|
16
|
+
</div>}class U extends k{#t;#s;#e;#o;#a;#n;#r;#i;#l;#c;#m;#d;#h;#C;#f;#p;constructor(e){super(e,{styleElementIsFunction:!0}),this.#t="open"in e,this.#s="expanded"in e,this.#r=new T,this.#i=null,this.#l=null,this.#c=null,this.#m=null,this.#d=b(()=>(this.#t?e.open:e.defaultOpen)===!0),this.#h=b(()=>(this.#s?e.expanded:e.defaultExpanded)===!0),this.#C=!1,this.#f=0,this.#p=[],this.#n=new w({canDrag:()=>this.#d,canExpand:()=>!this.#h,dragEnded:(s,n,o)=>this.#O(s,n,o),dragMoved:s=>this.#T(s),dragStarted:()=>this.#w(),expand:s=>this.#u(!0,!0,s)});const t=super.consumeProps([],["onOpenChange","onDismiss","onExpandedChange"]);this.#e=t.onOpenChange,this.#o=t.onDismiss,this.#a=t.onExpandedChange}open(){this.#v(!0,!0)}close(e){this.#v(!1,!0,e)}expand(e){this.#u(!0,!0,e)}collapse(e){this.#u(!1,!0,e)}#v(e,t,s){let n;if(e!==this.#d){if(t&&this.#t){this.#e?.(e,s);return}e&&(n=this.#y()),this.#d=e,this.#B(),e||this.#L(),super.setClass("cw-BottomSheet-open",e),super.setAttribute("aria-hidden",e?void 0:"true"),e&&this.#P(n??this.#g()),t&&this.#e?.(e,s)}}#u(e,t,s){const n=this.#c;let o;if(e!==this.#h){if(t&&this.#s){this.#a?.(e,s);return}!this.#C&&this.#d&&(o=this.#S()),this.#h=e,super.setClass("cw-BottomSheet-expanded",e),this.#b(),!e&&n!==null&&n.contains(p(n))&&this.#l?.focus(),this.#C?this.#r.retarget(this.#S()):o!==void 0&&this.#P(o),t&&this.#a?.(e,s)}}#E(e){return!this.#d||this.props.dismissible!==!0?!1:(this.#o?.(e),e?.defaultPrevented!==!0)}#L(){const e=this.#i,t=e===null?null:p(e),s=this.#m;this.#m=null,!(e===null||t===null||!e.contains(t))&&(s?.isConnected===!0&&s.focus(),p(e)===t&&t.blur())}#b(){this.#l?.setAttribute("aria-expanded",this.#h?"true":"false"),this.#l?.setAttribute("aria-label",this.#h?this.props.collapseLabel??"Collapse bottom sheet":this.props.expandLabel??"Expand bottom sheet")}#g(){return this.#i?.getBoundingClientRect().height??0}#y(){const e=this.#i,t=e?.offsetParent;return e===null||!u(t)?void 0:e.getBoundingClientRect().top-t.getBoundingClientRect().top-e.offsetTop}#x(){const e=this.#i,t=e===null?void 0:E(e),s=Number.parseFloat(t?.minBlockSize??"");return Math.max(0,this.#g()-(Number.isFinite(s)?s:0))}#S(){return this.#d?this.#h?0:this.#x():this.#g()}#M(e){this.#C=e,super.setClass(M,e)}#P(e){const t=this.#g(),s=this.#S();t===0||e===s||(this.#r.track(t,e),this.#M(!0),this.#r.settle(e,s,0,()=>this.#B()))}#B(){this.#n.reset(),this.#r.clear(),this.#M(!1),super.setClass(h,!1)}#w(){const e=this.#r.interrupt(),t=this.#x(),s=this.#g();this.#p=this.props.dismissible===!0?[0,t,s]:[0,t],this.#f=e??this.#S(),this.#r.track(s,this.#f),this.#M(!0),super.setClass(h,!0)}#T(e){this.#r.set(Math.min(Math.max(this.#f+e,0),this.#p.at(-1)??0))}#O(e,t,s){const n=this.#p.length===3,o=this.#p.at(-1)??0,r=Math.min(Math.max(this.#f+e,0),o),a=P(this.#p,r,t);if(super.setClass(h,!1),n&&a===o&&this.#E(s)){this.#r.settle(r,o,t,()=>{this.#v(!1,!0,s),this.#d&&this.#r.settle(o,this.#S(),0,()=>this.#B())});return}(!n||a!==o)&&this.#u(a===0,!0,s),this.#r.settle(r,this.#S(),t,()=>this.#B())}#D=e=>{const t=this.#l;this.#n.consumeClick()||y(e,t,()=>{this.#l===t&&this.#d&&this.#u(!this.#h,!0,e)},!1)};#H=e=>{const t=this.#i,s=e.relatedTarget;t===null||!u(e.target)||(u(s)&&!t.contains(s)&&(this.#m=s),!this.#h&&this.#d&&this.#c?.contains(e.target)===!0&&this.#u(!0,!0,e))};applyComponentProps(){const e=super.readProps(["attr:aria-label","collapseLabel","dragHandle","expandLabel","expanded","label","open","peekHeight"]),t=e["attr:aria-label"]??e.label??"Bottom sheet";e.openChanged&&this.#t&&this.#v(e.open===!0,!1),e.expandedChanged&&this.#s&&this.#u(e.expanded===!0,!1),this.styleElement?.getAttribute("aria-label")!==t&&super.setAttribute("aria-label",t),(e.collapseLabelChanged||e.expandLabelChanged)&&this.#b(),e.dragHandleChanged&&super.setClass(m,e.dragHandle===!1),e.peekHeightChanged&&super.setStyle(D,H(e.peekHeight))}onStyleElementChanged(e){super.onStyleElementChanged(e),this.#l?.removeEventListener("click",this.#D),this.#i?.removeEventListener("focusin",this.#H),this.#B(),this.#i=e?.querySelector(".cw-BottomSheet-surface")??null,this.#l=e?.querySelector("[data-cw-sheet-handle]")??null,this.#c=e?.querySelector(".cw-BottomSheet-content")??null,this.#n.attach(this.#i,this.#l),this.#r.attach(this.#i),this.#l?.addEventListener("click",this.#D),this.#i?.addEventListener("focusin",this.#H),super.setClass("cw-BottomSheet-open",this.#d),super.setClass("cw-BottomSheet-expanded",this.#h),super.setAttribute("aria-hidden",this.#d?void 0:"true"),this.#b()}render(e){const t=this.props;return<div class="cw-BottomSheet"role="region">
|
|
17
|
+
<section class={`cw-BottomSheet-surface ${c}`}tabIndex={-1}>
|
|
18
|
+
<button class="cw-BottomSheet-dragHandle"data-cw-sheet-handle="true"type="button">{t.dragHandleContent}</button>
|
|
19
|
+
<div class="cw-BottomSheet-content">{e}</div>
|
|
20
|
+
</section>
|
|
21
|
+
</div>}onControllerCleanup(){this.#l?.removeEventListener("click",this.#D),this.#i?.removeEventListener("focusin",this.#H),this.#n.attach(null,null),this.#r.attach(null),super.onControllerCleanup()}}const Z=L(()=>j,()=>U),pe=i=>Z(x(i,O));export{pe as BottomSheet,U as BottomSheetController,me as ModalBottomSheet,W as ModalBottomSheetController};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import{createUniqueId as d,mergeProps as f}from"solid-js";import{defineDomComponent as g}from"..";import{IconButton as S}from"../action/icon-button";import{ELEVATION_SHADOW_CSS_CLASS as h}from"../container/elevation-shadow";import{DialogController as C,actionOf as E,dialogAttributesOf as b,isInitiallyOpen as v}from"./dialog";import{resolveSurfaceSlots as w}from"./slots";import"../container/elevation-shadow.css";import"./surface.css";const m="cw-SideSheet-noDismiss",y="data-cw-side-sheet-edge",D=["actions","body","children","header","leadingIcon"];function L(i,e){const t=d();return<dialog{...b(i,e,{classes:{[h]:!0,[m]:e.dismissible===!1,"cw-SideSheet":!0,"cw-SideSheet-detached":e.detached===!0,"cw-SideSheet-modal":e.modal,"cw-SideSheet-open":v(e)},label:e.header===void 0?"Side sheet":void 0,labelledBy:e.label===void 0&&e.header!==void 0?t:void 0,role:"dialog"})}data-cw-side-sheet-edge={e.edge??"end"}>
|
|
2
|
+
<header class="cw-SideSheet-header">
|
|
3
|
+
<div class="cw-SideSheet-icon">{e.leadingIcon}</div>
|
|
4
|
+
<h2 class="cw-SideSheet-title"id={t}>{e.header}</h2>
|
|
5
|
+
<S attr:aria-label={e.dismissLabel??"Close side sheet"}attr:data-cw-dialog-action="dismiss"class="cw-SideSheet-dismiss"name="close"size="sm"/>
|
|
6
|
+
</header>
|
|
7
|
+
<div class="cw-SideSheet-body">{e.body??i.children}</div>
|
|
8
|
+
<footer class="cw-SideSheet-actions">{e.actions}</footer>
|
|
9
|
+
</dialog>}class P extends C{#e;constructor(e){super(e,"cw-SideSheet"),this.#e=d()}defaultLabel(){return this.props.label??(this.props.header===void 0?"Side sheet":void 0)}defaultLabelledBy(){return this.props.label===void 0&&this.props.header!==void 0?this.#e:void 0}allowDismiss(e,t){return this.props.dismissible!==!1}#t=e=>{E(this.styleElement,e)==="dismiss"&&this.requestDismiss("dismiss",e)};applyComponentProps(){const e=super.readProps(["detached","dismissible","edge","modal"]);super.applyComponentProps(),e.detachedChanged&&super.setClass("cw-SideSheet-detached",e.detached===!0),e.dismissibleChanged&&super.setClass(m,e.dismissible===!1),e.edgeChanged&&super.setAttribute(y,e.edge??"end"),e.modalChanged&&super.setClass("cw-SideSheet-modal",e.modal)}onStyleElementChanged(e){this.styleElement?.removeEventListener("click",this.#t),super.onStyleElementChanged(e),e?.addEventListener("click",this.#t)}render(e){const t=this.props,u=this.#e;return<dialog class={`cw-SideSheet ${h}`}>
|
|
10
|
+
<header class="cw-SideSheet-header">
|
|
11
|
+
<div class="cw-SideSheet-icon">{t.leadingIcon}</div>
|
|
12
|
+
<h2 class="cw-SideSheet-title"id={u}>{t.header}</h2>
|
|
13
|
+
<S attr:aria-label={t.dismissLabel??"Close side sheet"}attr:data-cw-dialog-action="dismiss"class="cw-SideSheet-dismiss"name="close"size="sm"/>
|
|
14
|
+
</header>
|
|
15
|
+
<div class="cw-SideSheet-body">{t.body??e}</div>
|
|
16
|
+
<footer class="cw-SideSheet-actions">{t.actions}</footer>
|
|
17
|
+
</dialog>}onControllerCleanup(){this.styleElement?.removeEventListener("click",this.#t),super.onControllerCleanup()}}function c(i,e){return f(w(i,D),{modal:e})}const p=g(()=>L,()=>P),T=i=>p(c(i,!1)),x=i=>p(c(i,!0));export{x as ModalSideSheet,P as SideSheetController,T as StandardSideSheet};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{children as c,createMemo as i,mergeProps as u}from"solid-js";function d(e,t){return t?i(e):c(e)}function a(e,t,n=[]){const r=e,s={};for(const o of Object.keys(e).filter(l=>t.includes(l)))Object.defineProperty(s,o,{enumerable:!0,get:d(()=>r[o],n.includes(o))});return u(e,s)}export{a as resolveSurfaceSlots};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@cw-attribute-roles cw-Surface;@property --_cw-Surface-shape{syntax: "*"; inherits: false;}@property --_cw-BottomSheet-offset{syntax: "<number>"; inherits: false; initial-value: 0;}@property --_cw-BottomSheet-overshoot{syntax: "<number>"; inherits: false; initial-value: 0;}@layer cw-theme{.cw-Surface-expressive,.cw-theme-expressive.cw-Surface,.cw-theme-expressive .cw-Surface,.cw-theme-expressive.cw-List,.cw-theme-expressive .cw-List,.cw-theme-expressive.cw-ListItem,.cw-theme-expressive .cw-ListItem,.cw-theme-expressive.cw-Menu,.cw-theme-expressive .cw-Menu,.cw-theme-expressive.cw-Menu-popup,.cw-theme-expressive .cw-Menu-popup,.cw-theme-expressive.cw-MenuItem,.cw-theme-expressive .cw-MenuItem,.cw-theme-expressive.cw-SwipeToDismiss,.cw-theme-expressive .cw-SwipeToDismiss,.cw-theme-expressive.cw-Carousel,.cw-theme-expressive .cw-Carousel,.cw-theme-expressive.cw-Carousel-viewport,.cw-theme-expressive .cw-Carousel-viewport,.cw-theme-expressive.cw-Carousel-controls button,.cw-theme-expressive .cw-Carousel-controls button{@cw-apply-theme expressive,cw-Surface;}}@layer cw-style{.cw-Surface{--cw-interactable-focusIndicator-color: cw-var(--cw-Surface-focusIndicatorColor);--cw-interactable-focusIndicator-offset: cw-var(--cw-State-focusIndicator-outerOffset);--cw-interactable-focusIndicator-thickness: cw-var(--cw-State-focusIndicator-thickness);background-color:cw-var(--cw-Surface-color);border-color:cw-var(--cw-Surface-outlineColor);border-radius:var(--_cw-Surface-shape, cw-var(--cw-Surface-shape));border-style:solid;border-width:cw-var(--cw-Surface-outlineThickness);box-sizing:border-box;color:cw-var(--cw-Surface-onColor);display:flex;flex-flow:column nowrap;min-inline-size:0;position:relative;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:background-color,border-color,color,--cw-elevationShadow-level;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing)}.cw-List,.cw-ListItem,.cw-Menu,.cw-Menu-popup,.cw-MenuItem,.cw-SwipeToDismiss,.cw-Carousel,.cw-Carousel-viewport,.cw-Carousel-controls button,.cw-PullToRefresh{--cw-Surface-color: cw-var(--cw-Surface-color, default);--cw-Surface-onColor: cw-var(--cw-Surface-onColor, default);--cw-Surface-shape: cw-var(--cw-Surface-shape, default);--cw-Surface-outlineColor: cw-var(--cw-Surface-outlineColor, default);--cw-Surface-outlineThickness: cw-var(--cw-Surface-outlineThickness, default);--cw-Surface-selectedColor: cw-var(--cw-Surface-selectedColor, default);--cw-Surface-dividerColor: cw-var(--cw-Surface-dividerColor, default);--cw-Surface-dividerThickness: cw-var(--cw-Surface-dividerThickness, default);--cw-Surface-listItemHeight: cw-var(--cw-Surface-listItemHeight, default);--cw-Surface-listItemHeightDense: cw-var(--cw-Surface-listItemHeightDense, default);--cw-Surface-dialogScrimColor: cw-var(--cw-Surface-dialogScrimColor, default);--cw-Surface-dialogShape: cw-var(--cw-Surface-dialogShape, default);--cw-Surface-menuColor: cw-var(--cw-Surface-menuColor, default);--cw-Surface-menuShape: cw-var(--cw-Surface-menuShape, default);--cw-Surface-sheetColor: cw-var(--cw-Surface-sheetColor, default);--cw-Surface-sheetShape: cw-var(--cw-Surface-sheetShape, default);--cw-Surface-sheetPeekHeight: cw-var(--cw-Surface-sheetPeekHeight, default);--cw-Surface-focusIndicatorColor: cw-var(--cw-Surface-focusIndicatorColor, default)}.cw-List,.cw-Menu,.cw-SwipeToDismiss,.cw-Carousel,.cw-PullToRefresh{--cw-surface-color: cw-var(--cw-Surface-color);--cw-surface-on-color: cw-var(--cw-Surface-onColor);--cw-surface-shape: cw-var(--cw-Surface-shape);--cw-surface-outline-color: cw-var(--cw-Surface-outlineColor);--cw-surface-outline-thickness: cw-var(--cw-Surface-outlineThickness);--cw-surface-selected-color: cw-var(--cw-Surface-selectedColor);--cw-surface-divider-color: cw-var(--cw-Surface-dividerColor);--cw-surface-divider-thickness: cw-var(--cw-Surface-dividerThickness);--cw-surface-list-item-height: cw-var(--cw-Surface-listItemHeight);--cw-surface-list-item-height-dense: cw-var(--cw-Surface-listItemHeightDense);--cw-surface-dialog-scrim-color: cw-var(--cw-Surface-dialogScrimColor);--cw-surface-dialog-shape: cw-var(--cw-Surface-dialogShape);--cw-surface-menu-color: cw-var(--cw-Surface-menuColor);--cw-surface-menu-shape: cw-var(--cw-Surface-menuShape);--cw-surface-sheet-color: cw-var(--cw-Surface-sheetColor);--cw-surface-sheet-shape: cw-var(--cw-Surface-sheetShape);--cw-surface-sheet-peek-height: cw-var(--cw-Surface-sheetPeekHeight);--cw-surface-focus-indicator-color: cw-var(--cw-Surface-focusIndicatorColor)}.cw-Surface-clickable,.cw-Surface-selectable{cursor:pointer}.cw-Surface-hover{--cw-interactable-stateLayer-color: currentcolor;--cw-interactable-stateLayer-opacity: cw-var(--cw-State-layer-hoverOpacity)}.cw-Surface-focus{--cw-interactable-stateLayer-color: currentcolor;--cw-interactable-stateLayer-opacity: cw-var(--cw-State-layer-focusOpacity)}.cw-Surface-press{--cw-interactable-ripple-color: currentcolor;--cw-interactable-ripple-opacity: cw-var(--cw-State-layer-pressOpacity)}.cw-Surface-selected{background-color:cw-var(--cw-Surface-selectedColor);color:cw-var(--cw-Surface-selectedOnColor)}.cw-Surface-disabled{cursor:default;opacity:cw-var(--cw-Surface-disabledOpacity);pointer-events:none;user-select:none}._cw-Surface-surface{--cw-Surface-color: cw-var(--cw-Color-surface-fill)}._cw-Surface-surface-dim{--cw-Surface-color: cw-var(--cw-Color-surface-fillDim)}._cw-Surface-surface-bright{--cw-Surface-color: cw-var(--cw-Color-surface-fillBright)}._cw-Surface-surface-container-lowest{--cw-Surface-color: cw-var(--cw-Color-surface-containerLowest)}._cw-Surface-surface-container-low{--cw-Surface-color: cw-var(--cw-Color-surface-containerLow)}._cw-Surface-surface-container{--cw-Surface-color: cw-var(--cw-Color-surface-container)}._cw-Surface-surface-container-high{--cw-Surface-color: cw-var(--cw-Color-surface-containerHigh)}._cw-Surface-surface-container-highest{--cw-Surface-color: cw-var(--cw-Color-surface-containerHighest)}._cw-Surface-inverse{--cw-Surface-color: cw-var(--cw-Color-surface-inverseFill);--cw-Surface-onColor: cw-var(--cw-Color-surface-inverseOnFill)}._cw-Surface-primary{--cw-Surface-color: cw-var(--cw-Color-primary-fill);--cw-Surface-onColor: cw-var(--cw-Color-primary-onFill)}._cw-Surface-secondary{--cw-Surface-color: cw-var(--cw-Color-secondary-fill);--cw-Surface-onColor: cw-var(--cw-Color-secondary-onFill)}._cw-Surface-tertiary{--cw-Surface-color: cw-var(--cw-Color-tertiary-fill);--cw-Surface-onColor: cw-var(--cw-Color-tertiary-onFill)}._cw-Surface-error{--cw-Surface-color: cw-var(--cw-Color-error-fill);--cw-Surface-onColor: cw-var(--cw-Color-error-onFill)}._cw-Surface-elevation-0{--cw-elevationShadow-level: cw-var(--cw-Elevation-level-0)}._cw-Surface-elevation-1{--cw-elevationShadow-level: cw-var(--cw-Elevation-level-1)}._cw-Surface-elevation-2{--cw-elevationShadow-level: cw-var(--cw-Elevation-level-2)}._cw-Surface-elevation-3{--cw-elevationShadow-level: cw-var(--cw-Elevation-level-3)}._cw-Surface-elevation-4{--cw-elevationShadow-level: cw-var(--cw-Elevation-level-4)}._cw-Surface-elevation-5{--cw-elevationShadow-level: cw-var(--cw-Elevation-level-5)}._cw-Surface-shape-none{--_cw-Surface-shape: cw-var(--cw-CornerRadius-none)}._cw-Surface-shape-extra-small{--_cw-Surface-shape: cw-var(--cw-CornerRadius-xsmall)}._cw-Surface-shape-small{--_cw-Surface-shape: cw-var(--cw-CornerRadius-small)}._cw-Surface-shape-medium{--_cw-Surface-shape: cw-var(--cw-CornerRadius-medium)}._cw-Surface-shape-large{--_cw-Surface-shape: cw-var(--cw-CornerRadius-large)}._cw-Surface-shape-extra-large{--_cw-Surface-shape: cw-var(--cw-CornerRadius-xlarge)}._cw-Surface-shape-full{--_cw-Surface-shape: cw-var(--cw-CornerRadius-full)}.cw-Divider{--cw-Surface-dividerColor: cw-var(--cw-Surface-dividerColor, default);border-color:cw-var(--cw-Surface-dividerColor);border-style:solid;border-width:0;box-sizing:border-box;flex:none}._cw-Divider-horizontal{block-size:0;border-block-start-width:var(--_cw-Divider-thickness, cw-var(--cw-Surface-dividerThickness))}._cw-Divider-vertical{align-self:stretch;border-inline-start-width:var(--_cw-Divider-thickness, cw-var(--cw-Surface-dividerThickness));inline-size:0;min-block-size:1lh}._cw-Divider-horizontal:is(._cw-Divider-inset-start,._cw-Divider-inset-both){margin-inline-start:cw-var(--cw-Surface-dividerInset)}._cw-Divider-horizontal:is(._cw-Divider-inset-end,._cw-Divider-inset-both){margin-inline-end:cw-var(--cw-Surface-dividerInset)}._cw-Divider-vertical:is(._cw-Divider-inset-start,._cw-Divider-inset-both){margin-block-start:cw-var(--cw-Surface-dividerInset)}._cw-Divider-vertical:is(._cw-Divider-inset-end,._cw-Divider-inset-both){margin-block-end:cw-var(--cw-Surface-dividerInset)}.cw-Dialog{--cw-Surface-dialogColor: cw-var(--cw-Surface-dialogColor, default);--cw-Surface-dialogElevation: cw-var(--cw-Surface-dialogElevation, default);--cw-Surface-dialogShape: cw-var(--cw-Surface-dialogShape, default);--cw-elevationShadow-level: cw-var(--cw-Surface-dialogElevation);--_cw-Dialog-effect-duration: cw-var(--cw-Motion-spring-effect-default-duration);--_cw-Dialog-effect-easing: cw-var(--cw-Motion-spring-effect-default-easing);background-color:cw-var(--cw-Surface-dialogColor);border-radius:cw-var(--cw-Surface-dialogShape);border-style:none;box-sizing:border-box;color:cw-var(--cw-Color-surface-onFill);inline-size:fit-content;inset:0;margin:auto;max-block-size:calc(100% - (2*cw-var(--cw-Surface-dialogMargin)));max-inline-size:min(cw-var(--cw-Surface-dialogMaxWidth),100% - 2 * cw-var(--cw-Surface-dialogMargin));min-inline-size:min(cw-var(--cw-Surface-dialogMinWidth),100% - 2 * cw-var(--cw-Surface-dialogMargin));overflow:auto;padding:cw-var(--cw-Surface-dialogPadding);position:fixed;transition-behavior:allow-discrete;transition-duration:var(--_cw-Dialog-effect-duration),var(--_cw-Dialog-effect-duration),var(--_cw-Dialog-effect-duration),cw-var(--cw-Motion-spring-spatial-default-duration);transition-property:display,opacity,overlay,scale;transition-timing-function:var(--_cw-Dialog-effect-easing),var(--_cw-Dialog-effect-easing),var(--_cw-Dialog-effect-easing),cw-var(--cw-Motion-spring-spatial-default-easing)}.cw-Dialog:not([open]){--_cw-Dialog-effect-duration: cw-var(--cw-Motion-spring-effect-fast-duration);--_cw-Dialog-effect-easing: cw-var(--cw-Motion-spring-effect-fast-easing);opacity:0}:is(.cw-Dialog,.cw-ModalBottomSheet,.cw-SideSheet)::backdrop{--cw-Surface-dialogScrimColor: cw-var(--cw-Surface-dialogScrimColor, default);background-color:cw-scale-opacity(cw-var(--cw-Surface-dialogScrimColor),cw-var(--cw-Surface-dialogScrimOpacity));transition-behavior:allow-discrete;transition-duration:cw-var(--cw-Motion-spring-effect-default-duration);transition-property:background-color,display,overlay;transition-timing-function:cw-var(--cw-Motion-spring-effect-default-easing)}:is(.cw-Dialog,.cw-ModalBottomSheet,.cw-SideSheet):not([open])::backdrop,._cw-ModalBottomSheet-hiding::backdrop{background-color:transparent}.cw-Dialog:not([open])::backdrop{transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing)}@starting-style{.cw-Dialog[open]{opacity:0;scale:.8}:is(.cw-Dialog,.cw-ModalBottomSheet,.cw-SideSheet)[open]::backdrop{background-color:transparent}}.cw-Dialog:focus-visible,.cw-BottomSheet-dragHandle:focus-visible{outline-color:cw-var(--cw-Color-secondary-fill);outline-offset:cw-var(--cw-State-focusIndicator-outerOffset);outline-style:solid;outline-width:cw-var(--cw-State-focusIndicator-thickness)}.cw-FullScreenDialog:focus-visible,.cw-ModalBottomSheet:focus-visible,.cw-BottomSheet-surface:focus-visible,.cw-SideSheet:focus-visible{outline-color:cw-var(--cw-Color-secondary-fill);outline-offset:cw-var(--cw-State-focusIndicator-innerOffset);outline-style:solid;outline-width:cw-var(--cw-State-focusIndicator-thickness)}.cw-AlertDialog{--cw-Surface-dialogHeadlineColor: cw-var(--cw-Surface-dialogHeadlineColor, default);--cw-Surface-dialogIconColor: cw-var(--cw-Surface-dialogIconColor, default);--cw-Surface-dialogSupportingTextColor: cw-var(--cw-Surface-dialogSupportingTextColor, default);--cw-Surface-dividerColor: cw-var(--cw-Surface-dividerColor, default);--_cw-AlertDialog-color: cw-var(--cw-Surface-dialogColor);--_cw-AlertDialog-dividerColor: cw-var(--cw-Surface-dividerColor);--_cw-AlertDialog-headlineColor: cw-var(--cw-Surface-dialogHeadlineColor);--_cw-AlertDialog-iconColor: cw-var(--cw-Surface-dialogIconColor);--_cw-AlertDialog-iconSize: cw-var(--cw-Surface-dialogIconSize);--_cw-AlertDialog-spacing: cw-var(--cw-Surface-dialogSpacing);--_cw-AlertDialog-supportingTextColor: cw-var(--cw-Surface-dialogSupportingTextColor);--_cw-AlertDialog-textSpacing: cw-var(--cw-Surface-dialogPadding);flex-direction:column;max-block-size:min(cw-var(--cw-Surface-dialogMaxHeight),100% - 2 * cw-var(--cw-Surface-dialogMargin));overflow:hidden}.cw-AlertDialog[open]{display:flex}.cw-AlertDialog-icon{align-self:center;color:var(--_cw-AlertDialog-iconColor);display:flex;flex:none;font-size:var(--_cw-AlertDialog-iconSize);margin-block-end:var(--_cw-AlertDialog-spacing)}.cw-AlertDialog-icon>.cw-Icon{--cw-Icon-size: var(--_cw-AlertDialog-iconSize)}.cw-AlertDialog-title{-cw-typescale:--cw-Typescale-headline-small;color:var(--_cw-AlertDialog-headlineColor);flex:none;margin-block-end:var(--_cw-AlertDialog-spacing);margin-block-start:0;margin-inline:0}.cw-AlertDialog:has(>.cw-AlertDialog-icon:not(:empty))>.cw-AlertDialog-title{text-align:center}.cw-AlertDialog-text{-cw-typescale:--cw-Typescale-body-medium;background-attachment:local,local,scroll,scroll;background-image:linear-gradient(var(--_cw-AlertDialog-color) 0 0),linear-gradient(var(--_cw-AlertDialog-color) 0 0),linear-gradient(var(--_cw-AlertDialog-dividerColor) 0 0),linear-gradient(var(--_cw-AlertDialog-dividerColor) 0 0);background-position:top,bottom,top,bottom;background-repeat:no-repeat;background-size:100% 1px;color:var(--_cw-AlertDialog-supportingTextColor);flex:0 1 auto;min-block-size:0;overflow:auto}.cw-AlertDialog-actions{column-gap:8px;display:flex;flex:none;flex-wrap:wrap;justify-content:flex-end;margin-block-start:var(--_cw-AlertDialog-textSpacing);row-gap:12px}.cw-AlertDialog-icon:empty,.cw-AlertDialog-title:empty,.cw-AlertDialog-noDismiss .cw-AlertDialog-dismiss{display:none}.cw-FullScreenDialog{--cw-Surface-fullScreenDialogColor: cw-var(--cw-Surface-fullScreenDialogColor, default);--cw-Surface-fullScreenDialogHeaderScrolledColor: cw-var(--cw-Surface-fullScreenDialogHeaderScrolledColor, default);--cw-Surface-fullScreenDialogHeaderScrolledElevation: cw-var(--cw-Surface-fullScreenDialogHeaderScrolledElevation, default);--_cw-FullScreenDialog-headerHeight: cw-var(--cw-Surface-fullScreenDialogHeaderHeight);--_cw-FullScreenDialog-scrolledColor: cw-var(--cw-Surface-fullScreenDialogHeaderScrolledColor);--_cw-FullScreenDialog-scrolledElevation: cw-var(--cw-Surface-fullScreenDialogHeaderScrolledElevation);--_cw-FullScreenDialog-padding: cw-var(--cw-Surface-dialogPadding);--_cw-FullScreenDialog-duration: cw-var(--cw-Motion-spring-spatial-slow-duration);--_cw-FullScreenDialog-easing: cw-var(--cw-Motion-spring-spatial-slow-easing);background-color:cw-var(--cw-Surface-fullScreenDialogColor);block-size:100%;border-radius:0;border-style:none;box-sizing:border-box;color:cw-var(--cw-Color-surface-onFill);flex-direction:column;inline-size:100%;inset:0;margin:0;max-block-size:none;max-inline-size:none;overflow:hidden;padding:0;position:fixed;transition-behavior:allow-discrete;transition-duration:var(--_cw-FullScreenDialog-duration);transition-property:display,overlay,translate;transition-timing-function:var(--_cw-FullScreenDialog-easing)}.cw-FullScreenDialog[open]{display:flex}.cw-FullScreenDialog:not([open]){--_cw-FullScreenDialog-duration: cw-var(--cw-Motion-spring-effect-fast-duration);--_cw-FullScreenDialog-easing: cw-var(--cw-Motion-spring-effect-fast-easing);translate:0 100%}@starting-style{.cw-FullScreenDialog[open]{translate:0 100%}}.cw-FullScreenDialog::backdrop{background-color:transparent}.cw-FullScreenDialog-header{--cw-elevationShadow-level: cw-var(--cw-Elevation-level-0);align-items:center;block-size:var(--_cw-FullScreenDialog-headerHeight);box-sizing:border-box;display:flex;flex:none;padding-inline:4px;transition-duration:cw-var(--cw-Motion-spring-effect-default-duration);transition-property:background-color,--cw-elevationShadow-level;transition-timing-function:cw-var(--cw-Motion-spring-effect-default-easing)}.cw-FullScreenDialog-scrolled .cw-FullScreenDialog-header{--cw-elevationShadow-level: var(--_cw-FullScreenDialog-scrolledElevation);background-color:var(--_cw-FullScreenDialog-scrolledColor)}.cw-FullScreenDialog-title{-cw-typescale:--cw-Typescale-title-large;flex:1 1 auto;margin-block:0;margin-inline:12px 0;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cw-FullScreenDialog-content{flex:1 1 auto;min-block-size:0;overflow:auto;padding:var(--_cw-FullScreenDialog-padding)}.cw-FullScreenDialog-noConfirm .cw-FullScreenDialog-confirm{display:none}.cw-SideSheet{--cw-Surface-sideSheetColor: cw-var(--cw-Surface-sideSheetColor, default);--cw-Surface-sideSheetDividerColor: cw-var(--cw-Surface-sideSheetDividerColor, default);--cw-Surface-sideSheetHeadlineColor: cw-var(--cw-Surface-sideSheetHeadlineColor, default);--cw-Surface-sideSheetModalColor: cw-var(--cw-Surface-sideSheetModalColor, default);--cw-Surface-sideSheetModalElevation: cw-var(--cw-Surface-sideSheetModalElevation, default);--cw-Surface-sideSheetShape: cw-var(--cw-Surface-sideSheetShape, default);--cw-elevationShadow-level: cw-var(--cw-Elevation-level-0);--_cw-SideSheet-direction: 1;--_cw-SideSheet-dividerColor: cw-var(--cw-Surface-sideSheetDividerColor);--_cw-SideSheet-duration: cw-var(--cw-Motion-spring-spatial-default-duration);--_cw-SideSheet-easing: cw-var(--cw-Motion-spring-spatial-default-easing);--_cw-SideSheet-headlineColor: cw-var(--cw-Surface-sideSheetHeadlineColor);--_cw-SideSheet-hidden: calc(var(--_cw-SideSheet-direction) * (100% + var(--_cw-SideSheet-margin)));--_cw-SideSheet-margin: 0px;background-color:cw-var(--cw-Surface-sideSheetColor);block-size:calc(100% - 2 * var(--_cw-SideSheet-margin));border-radius:0;border-style:none;box-sizing:border-box;color:cw-var(--cw-Color-surface-onFill);flex-direction:column;inline-size:cw-var(--cw-Surface-sideSheetWidth);inset-block:var(--_cw-SideSheet-margin);inset-inline-end:var(--_cw-SideSheet-margin);inset-inline-start:auto;margin:0;max-block-size:none;max-inline-size:calc(100% - 2 * var(--_cw-SideSheet-margin));padding:0;position:fixed;transition-behavior:allow-discrete;transition-duration:var(--_cw-SideSheet-duration);transition-property:display,overlay,translate;transition-timing-function:var(--_cw-SideSheet-easing)}.cw-SideSheet[open]{display:flex}.cw-SideSheet[data-cw-side-sheet-edge=start]{--_cw-SideSheet-direction: -1;inset-inline-end:auto;inset-inline-start:var(--_cw-SideSheet-margin)}.cw-SideSheet:dir(rtl){--_cw-SideSheet-direction: -1}.cw-SideSheet[data-cw-side-sheet-edge=start]:dir(rtl){--_cw-SideSheet-direction: 1}.cw-SideSheet:not([open]){--_cw-SideSheet-duration: cw-var(--cw-Motion-spring-effect-fast-duration);--_cw-SideSheet-easing: cw-var(--cw-Motion-spring-effect-fast-easing);translate:var(--_cw-SideSheet-hidden) 0}@starting-style{.cw-SideSheet[open]{translate:var(--_cw-SideSheet-hidden) 0}}.cw-SideSheet-modal{--cw-elevationShadow-level: cw-var(--cw-Surface-sideSheetModalElevation);background-color:cw-var(--cw-Surface-sideSheetModalColor);border-end-start-radius:cw-var(--cw-Surface-sideSheetShape);border-start-start-radius:cw-var(--cw-Surface-sideSheetShape)}.cw-SideSheet-modal[data-cw-side-sheet-edge=start]{border-end-end-radius:cw-var(--cw-Surface-sideSheetShape);border-end-start-radius:0;border-start-end-radius:cw-var(--cw-Surface-sideSheetShape);border-start-start-radius:0}.cw-SideSheet-detached{--_cw-SideSheet-margin: cw-var(--cw-Surface-sideSheetDetachedMargin);border-radius:cw-var(--cw-Surface-sideSheetShape)}.cw-SideSheet-header{align-items:center;box-sizing:border-box;display:flex;flex:none;gap:16px;padding-block:16px;padding-inline:24px}.cw-SideSheet-header:has(>.cw-SideSheet-icon:not(:empty)){padding-inline-start:16px}.cw-SideSheet-title{-cw-typescale:--cw-Typescale-title-large;color:var(--_cw-SideSheet-headlineColor);flex:1 1 auto;margin:0;min-inline-size:0}.cw-SideSheet-body{box-sizing:border-box;flex:1 1 auto;min-block-size:0;overflow:auto;padding-block-end:24px;padding-inline:24px}.cw-SideSheet-actions{align-items:center;border-block-start-color:var(--_cw-SideSheet-dividerColor);border-block-start-style:solid;border-block-start-width:1px;box-sizing:border-box;display:flex;flex:none;gap:8px;padding-block:16px;padding-inline:24px}.cw-SideSheet-icon:empty,.cw-SideSheet-actions:empty,.cw-SideSheet-noDismiss .cw-SideSheet-dismiss{display:none}@media (forced-colors: active){.cw-Dialog,.cw-FullScreenDialog,.cw-ModalBottomSheet,.cw-BottomSheet>.cw-BottomSheet-surface,.cw-SideSheet{outline-color:CanvasText;outline-style:solid;outline-width:2px}}.cw-ModalBottomSheet{--cw-Surface-dragHandleColor: cw-var(--cw-Surface-dragHandleColor, default);--cw-Surface-sheetColor: cw-var(--cw-Surface-sheetColor, default);--cw-Surface-sheetElevation: cw-var(--cw-Surface-sheetElevation, default);--cw-Surface-sheetShape: cw-var(--cw-Surface-sheetShape, default);--cw-elevationShadow-level: cw-var(--cw-Surface-sheetElevation);--_cw-BottomSheet-detent: max(0px, 100% - 50dvh);--_cw-BottomSheet-duration: cw-var(--cw-Motion-spring-spatial-default-duration);--_cw-BottomSheet-easing: cw-var(--cw-Motion-spring-spatial-default-easing);--_cw-BottomSheet-handleColor: cw-var(--cw-Surface-dragHandleColor);--_cw-BottomSheet-handleHeight: cw-var(--cw-Surface-dragHandleHeight);--_cw-BottomSheet-handleWidth: cw-var(--cw-Surface-dragHandleWidth);background-color:cw-var(--cw-Surface-sheetColor);border-start-end-radius:cw-var(--cw-Surface-sheetShape);border-start-start-radius:cw-var(--cw-Surface-sheetShape);border-style:none;box-sizing:border-box;color:cw-var(--cw-Color-surface-onFill);flex-direction:column;inline-size:100%;inset-block-end:0;inset-block-start:auto;inset-inline:0;margin-block:0;margin-inline:auto;max-block-size:100%;max-inline-size:cw-var(--cw-Surface-sheetMaxWidth);overflow:hidden;padding:0;position:fixed;transition-behavior:allow-discrete;transition-duration:cw-var(--cw-Motion-spring-effect-default-duration),cw-var(--cw-Motion-spring-effect-default-duration),var(--_cw-BottomSheet-duration);transition-property:display,overlay,translate;transition-timing-function:cw-var(--cw-Motion-spring-effect-default-easing),cw-var(--cw-Motion-spring-effect-default-easing),var(--_cw-BottomSheet-easing);translate:0 var(--_cw-BottomSheet-detent)}.cw-ModalBottomSheet[open]{display:flex}.cw-ModalBottomSheet-expanded{--_cw-BottomSheet-detent: 0px}.cw-ModalBottomSheet._cw-BottomSheet-tracking,.cw-BottomSheet._cw-BottomSheet-tracking>.cw-BottomSheet-surface{--_cw-BottomSheet-duration: 0s;--_cw-BottomSheet-overshoot: max(0, -1 * var(--_cw-BottomSheet-offset));scale:1 calc(1 + var(--_cw-BottomSheet-overshoot) / var(--_cw-BottomSheet-height));transform-origin:top;translate:0 calc(var(--_cw-BottomSheet-offset) * 1px)}.cw-ModalBottomSheet._cw-BottomSheet-tracking>.cw-BottomSheet-surface,.cw-BottomSheet._cw-BottomSheet-tracking>.cw-BottomSheet-surface>*{--_cw-BottomSheet-overshoot: inherit;scale:1 calc(var(--_cw-BottomSheet-height) / (var(--_cw-BottomSheet-height) + var(--_cw-BottomSheet-overshoot)));transform-origin:top}.cw-BottomSheet._cw-BottomSheet-tracking:not(.cw-BottomSheet-noDragHandle)>.cw-BottomSheet-surface>.cw-BottomSheet-content{transform-origin:50% calc(-1 * var(--_cw-BottomSheet-handleSize))}.cw-ModalBottomSheet:not([open]){--_cw-BottomSheet-detent: 100%;--_cw-BottomSheet-duration: cw-var(--cw-Motion-spring-effect-fast-duration);--_cw-BottomSheet-easing: cw-var(--cw-Motion-spring-effect-fast-easing)}.cw-BottomSheet{--cw-Surface-dragHandleColor: cw-var(--cw-Surface-dragHandleColor, default);--cw-Surface-sheetColor: cw-var(--cw-Surface-sheetColor, default);--cw-Surface-sheetElevation: cw-var(--cw-Surface-sheetElevation, default);--cw-Surface-sheetShape: cw-var(--cw-Surface-sheetShape, default);--_cw-BottomSheet-color: cw-var(--cw-Surface-sheetColor);--_cw-BottomSheet-elevation: cw-var(--cw-Surface-sheetElevation);--_cw-BottomSheet-handleColor: cw-var(--cw-Surface-dragHandleColor);--_cw-BottomSheet-handleHeight: cw-var(--cw-Surface-dragHandleHeight);--_cw-BottomSheet-handleWidth: cw-var(--cw-Surface-dragHandleWidth);--_cw-BottomSheet-maxWidth: cw-var(--cw-Surface-sheetMaxWidth);--_cw-BottomSheet-peek: var( --_cw-BottomSheet-peekHeight, var(--_cw-Scaffold-sheetPeekHeight, cw-var(--cw-Surface-sheetPeekHeight)) );--_cw-BottomSheet-shape: cw-var(--cw-Surface-sheetShape);inset:0;pointer-events:none;position:fixed;transition-behavior:allow-discrete;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:display;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing)}.cw-BottomSheet:not(.cw-BottomSheet-open){display:none}.cw-BottomSheet>.cw-BottomSheet-surface{--cw-elevationShadow-level: var(--_cw-BottomSheet-elevation);--_cw-BottomSheet-detent: calc(100% - var(--_cw-BottomSheet-peek));--_cw-BottomSheet-duration: cw-var(--cw-Motion-spring-spatial-default-duration);--_cw-BottomSheet-easing: cw-var(--cw-Motion-spring-spatial-default-easing);background-color:var(--_cw-BottomSheet-color);border-start-end-radius:var(--_cw-BottomSheet-shape);border-start-start-radius:var(--_cw-BottomSheet-shape);box-sizing:border-box;color:cw-var(--cw-Color-surface-onFill);inline-size:100%;inset-block-end:0;inset-inline:0;margin-inline:auto;max-block-size:100%;max-inline-size:var(--_cw-BottomSheet-maxWidth);min-block-size:var(--_cw-BottomSheet-peek);pointer-events:auto;position:absolute;transition-duration:var(--_cw-BottomSheet-duration);transition-property:translate;transition-timing-function:var(--_cw-BottomSheet-easing);translate:0 var(--_cw-BottomSheet-detent)}.cw-BottomSheet-expanded>.cw-BottomSheet-surface{--_cw-BottomSheet-detent: 0px}.cw-BottomSheet:not(.cw-BottomSheet-open)>.cw-BottomSheet-surface{--_cw-BottomSheet-detent: 100%;--_cw-BottomSheet-duration: cw-var(--cw-Motion-spring-effect-fast-duration);--_cw-BottomSheet-easing: cw-var(--cw-Motion-spring-effect-fast-easing)}.cw-BottomSheet-surface{--_cw-BottomSheet-handleSize: 48px;display:flex;flex-direction:column}.cw-ModalBottomSheet>.cw-BottomSheet-surface{flex:0 1 auto;min-block-size:0}.cw-BottomSheet-dragHandle{align-self:center;appearance:none;background-color:transparent;block-size:var(--_cw-BottomSheet-handleSize);border-radius:cw-var(--cw-CornerRadius-full);border-style:none;color:var(--_cw-BottomSheet-handleColor);cursor:grab;display:grid;flex:none;inline-size:var(--_cw-BottomSheet-handleSize);padding:0;place-items:center;touch-action:none;user-select:none}.cw-BottomSheet-dragHandle:empty:before{background-color:currentcolor;block-size:var(--_cw-BottomSheet-handleHeight);border-radius:cw-var(--cw-CornerRadius-full);content:"";inline-size:var(--_cw-BottomSheet-handleWidth)}.cw-BottomSheet-dragging .cw-BottomSheet-dragHandle{cursor:grabbing}.cw-BottomSheet-noDragHandle .cw-BottomSheet-dragHandle{display:none}.cw-BottomSheet-content{box-sizing:border-box;flex:0 1 auto;min-block-size:0;overflow:auto;overscroll-behavior:contain;padding-block-end:env(safe-area-inset-bottom)}.cw-Scaffold{--_cw-Scaffold-bottomInset: 0px;--_cw-Scaffold-fabSpacing: cw-var(--cw-Surface-scaffoldFabSpacing);background-color:cw-var(--cw-Color-background);box-sizing:border-box;color:cw-var(--cw-Color-onBackground);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;isolation:isolate;min-block-size:100%;min-inline-size:0;position:relative}.cw-Scaffold-topBar{grid-area:1 / 1;min-inline-size:0}.cw-Scaffold-content{box-sizing:border-box;grid-area:2 / 1;min-block-size:0;min-inline-size:0;overflow:auto;padding-block-end:var(--_cw-Scaffold-bottomInset)}.cw-Scaffold-bottomBar{grid-area:4 / 1;min-inline-size:0}.cw-Scaffold-layer{display:grid;grid-area:2 / 1 / 4;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;min-block-size:0;overflow:clip;pointer-events:none;position:relative;z-index:1}.cw-Scaffold-overlay{align-self:end;box-sizing:border-box;display:flex;flex-direction:column;grid-area:1 / 1;min-block-size:0;padding-block-end:var(--_cw-Scaffold-bottomInset);pointer-events:none}._cw-Scaffold-fab-endOverlay:not(:has(>.cw-Scaffold-layer>.cw-Scaffold-sheet>.cw-BottomSheet-open))>.cw-Scaffold-layer{grid-row:2 / 5}._cw-Scaffold-fab-endOverlay:not(:has(>.cw-Scaffold-layer>.cw-Scaffold-sheet>.cw-BottomSheet-open))>.cw-Scaffold-layer>.cw-Scaffold-overlay{grid-row:1 / -1}.cw-Scaffold-sheet{grid-area:2 / 1;min-block-size:0}.cw-Scaffold-sheet>.cw-BottomSheet{block-size:var(--_cw-BottomSheet-peek);position:static}.cw-Scaffold-sheet>:not(.cw-BottomSheet){pointer-events:auto}.cw-Scaffold-snackbar{align-self:center;max-inline-size:100%;pointer-events:none;position:relative;z-index:1}.cw-Scaffold-snackbar:has(>.cw-SnackbarHost){align-self:stretch}.cw-Scaffold-snackbar>.cw-SnackbarHost{inset:auto;padding:12px;position:relative}.cw-Scaffold-fab{align-self:flex-end;margin-block:0 var(--_cw-Scaffold-fabSpacing);margin-inline:var(--_cw-Scaffold-fabSpacing);pointer-events:none}._cw-Scaffold-fab-start>.cw-Scaffold-layer>.cw-Scaffold-overlay>.cw-Scaffold-fab{align-self:flex-start}._cw-Scaffold-fab-center>.cw-Scaffold-layer>.cw-Scaffold-overlay>.cw-Scaffold-fab{align-self:center}.cw-Scaffold-snackbar>:not(.cw-SnackbarHost),.cw-Scaffold-fab>*{pointer-events:auto}.cw-Scaffold-topBar:empty,.cw-Scaffold-bottomBar:empty,.cw-Scaffold-sheet:empty,.cw-Scaffold-snackbar:empty,.cw-Scaffold-fab:empty{display:none}.cw-Scaffold-safeArea{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}.cw-Scaffold-safeArea>.cw-Scaffold-topBar{padding-top:env(safe-area-inset-top)}.cw-Scaffold-safeArea>.cw-Scaffold-bottomBar{padding-bottom:env(safe-area-inset-bottom)}.cw-Scaffold-safeArea:has(>.cw-Scaffold-topBar:empty)>.cw-Scaffold-content{padding-top:env(safe-area-inset-top)}.cw-Scaffold-safeArea:has(>.cw-Scaffold-bottomBar:empty){--_cw-Scaffold-bottomInset: env(safe-area-inset-bottom)}.cw-PaneScaffold{box-sizing:border-box;display:flex;gap:cw-var(--cw-Surface-paneSpacing);min-block-size:0;min-inline-size:0;padding-inline:cw-var(--cw-Surface-paneMarginCompact)}.cw-PaneScaffold-pane{box-sizing:border-box;display:none;flex:1 1 0;min-block-size:0;min-inline-size:0;overflow:auto}:is(._cw-PaneScaffold-active-primary>._cw-PaneScaffold-primary,._cw-PaneScaffold-active-secondary>._cw-PaneScaffold-secondary,._cw-PaneScaffold-active-tertiary>._cw-PaneScaffold-tertiary):not(:empty){display:block}@media (min-width: 600px){.cw-PaneScaffold{padding-inline:cw-var(--cw-Surface-paneMargin)}}@media (min-width: 840px){.cw-PaneScaffold>._cw-PaneScaffold-primary:not(:empty),.cw-PaneScaffold:not(._cw-PaneScaffold-active-tertiary)>._cw-PaneScaffold-secondary:not(:empty){display:block}.cw-PaneScaffold>:is(._cw-PaneScaffold-secondary,._cw-PaneScaffold-tertiary){flex:0 0 cw-var(--cw-Surface-panePreferredWidth)}}@media (min-width: 1200px){.cw-PaneScaffold>.cw-PaneScaffold-pane:not(:empty){display:block}.cw-PaneScaffold>:is(._cw-PaneScaffold-secondary,._cw-PaneScaffold-tertiary){flex-basis:cw-var(--cw-Surface-panePreferredWidthExtraLarge)}}.cw-PaneScaffold-pane>.cw-SideSheet:not(.cw-SideSheet-modal){block-size:100%;inline-size:100%;inset:auto;max-inline-size:none;position:relative;translate:none}.cw-PaneScaffold>.cw-PaneScaffold-pane:has(>.cw-SideSheet:not([open]):only-child){display:none}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{untrack as E}from"solid-js";import{insert as v}from"solid-js/web";import{ELEVATION_SHADOW_CSS_CLASS as l}from"../container/elevation-shadow";import{FocusState as g,HoverState as y,PressState as L,defineInteractableComponent as k}from"../state";import{InteractableController as I}from"../state/controller";import{deferAfterDelegatedCancellation as i}from"../util/event";import{hasNestedInteractive as w,isElementNode as A}from"./interactive";import"../container/elevation-shadow.css";import"./surface.css";const P=g|y|L,c=new Set(["none","extra-small","small","medium","large","extra-large","full"]),d="cw-Surface-clickable",u="cw-Surface-disabled",f="cw-Surface-selectable",p="cw-Surface-selected";function h(r){return`_cw-Surface-${r??"surface-container"}`}function S(r){return`_cw-Surface-elevation-${r??0}`}function b(r){return r!==void 0&&c.has(r)?`_cw-Surface-shape-${r}`:void 0}function m(r){return r!==void 0&&!c.has(r)?r:void 0}function C(r,e,t){return r?e?-1:t??0:t}function x(r,e){const t=e.disabled===!0,s=e.selectable===!0,a=e.clickable===!0||s,n=s&&("selected"in e?e.selected:e.defaultSelected)===!0,o=b(e.shape);return<div{...r}aria-disabled={t?"true":void 0}aria-pressed={s?n?"true":"false":void 0}classList={{...r.classList,[l]:!0,[d]:e.clickable===!0,[u]:t,[f]:s,[p]:n,[h(e.color)]:!0,[S(e.elevation)]:!0,[o??""]:o!==void 0,"cw-Surface":!0}}data-cw-surface="true"role={a?"button":void 0}style={{...r.style,"--_cw-Surface-shape":m(e.shape)}}tabIndex={C(a,t,e.tabIndex)}/>}class D extends I{#s;#a;#t;#e;#n;constructor(e){super(e,{baseInteractionCssClassName:"cw-Surface",enabledInteractionStates:0,styleElementIsFunction:!0}),this.#s="selected"in e,this.#t=E(()=>(this.#s?e.selected:e.defaultSelected)===!0),this.#a=super.consumeProps([],["onSelectedChange"]).onSelectedChange,this.#e=!1,this.#n=null}#r(){return!this.isControllerDisposed&&this.props.disabled!==!0&&(this.props.clickable===!0||this.props.selectable===!0)}#i(e){const t=this.#n;t!==e&&(t!==null&&(t.removeEventListener("keydown",this.#c),t.removeEventListener("keyup",this.#d),t.removeEventListener("blur",this.#u),t.removeEventListener("click",this.#l,!0)),this.#n=e,e!==null&&(e.addEventListener("keydown",this.#c),e.addEventListener("keyup",this.#d),e.addEventListener("blur",this.#u),e.addEventListener("click",this.#l,!0)))}#o(e){super.setClass(p,e&&this.#t),super.setAttribute("aria-pressed",e?this.#t?"true":"false":void 0)}#l=e=>{this.props.disabled===!0&&(e.preventDefault(),e.stopImmediatePropagation())};#c=e=>{const t=this.functionElement;e.defaultPrevented||e.target!==t||!this.#r()||(e.key==="Enter"?i(e,t,()=>{!e.repeat&&this.#r()&&t?.matches(":focus")===!0&&t.click()}):e.key===" "&&i(e,t,()=>{!e.repeat&&this.#r()&&t?.matches(":focus")===!0&&(this.#e=!0)}))};#d=e=>{const t=this.functionElement,s=this.#e;e.target!==t||e.key!==" "||(this.#e=!1,s&&this.#r()&&i(e,t,()=>{this.#r()&&t?.matches(":focus")===!0&&t.click()}))};#u=()=>{this.#e=!1};applyComponentProps(){const e=super.readProps(["clickable","color","disabled","elevation","selectable","selected","shape","tabIndex"]),t=e.clickable===!0,s=e.disabled===!0,a=e.selectable===!0,n=t||a;e.colorChanged&&super.setClass("color",h(e.color)),e.elevationChanged&&super.setClass("elevation",S(e.elevation)),e.shapeChanged&&(super.setClass("shape",b(e.shape)),super.setStyle("--_cw-Surface-shape",m(e.shape))),e.disabledChanged&&(super.setClass(u,s),super.setAttribute("aria-disabled",s?"true":void 0)),(e.clickableChanged||e.selectableChanged||e.disabledChanged)&&((!n||s)&&(this.#e=!1),super.setClass(d,t),super.setClass(f,a),super.setAttribute("role",n?"button":void 0),super.setEnabledInteractionStates(!n||s?0:P),this.#i(n?super.functionElement:null),e.tabIndexChanged=!0),(e.selectedChanged||e.selectableChanged)&&(this.#s&&e.selectedChanged&&(this.#t=e.selected===!0),this.#o(a)),e.tabIndexChanged&&super.setAttribute("tabindex",C(n,s,e.tabIndex))}onEvent(e){const t=super.functionElement;if(this.isControllerDisposed||this.props.disabled===!0||(super.onEvent(e),e.type!=="click"||e.defaultPrevented||this.props.selectable!==!0)||t!==null&&A(e.target)&&e.target!==t&&(e.target.closest("[data-cw-surface]")!==t||w(e.target,t,e.composedPath())))return;const s=!this.#t;this.#a?.(s,e),this.#s||(this.#t=s,this.#o(!0))}render(e){const t=<div class={`cw-Surface ${l}`}data-cw-surface="true"/>;return v(t,e),t}onControllerCleanup(){this.#e=!1,this.#i(null),super.onControllerCleanup()}}const X=k(()=>x,()=>D);export{X as Surface,D as SurfaceController};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@cw-attribute-roles cw-LineHeight;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{Text as o}from"./text";import{Typography as r}from"./typography";export{o as Text,r as Typography};
|