@tempoxyz/ds 0.3.2 → 0.3.5

package/README.md

@@ -27,6 +27,12 @@ npm i @tempoxyz/ds zyzz
 | A web application    | Web     | `@tempoxyz/ds`        |
 | A mobile application | Mobile  | `@tempoxyz/ds/mobile` |
 
+Native Apple apps add the [tempoxyz/ds-swift](https://github.com/tempoxyz/ds-swift) Swift package, which each release mirrors from `swift/`, and import `TempoDesignSystem`. It holds the Web spacing, radius, ease, duration, opacity, scale, and shadow scales as Swift constants, such as `TDS.Spacing.s16` and `TDS.Ease.snappy.animation(TDS.Duration.ms200)`. Colors and typography stay with each app.
+
+```swift
+.package(url: "https://github.com/tempoxyz/ds-swift", from: "0.3.3")
+```
+
 ### 3. Set Up Zyzz
 
 Follow the [Zyzz setup guide](https://zyzz.style/docs/introduction/getting-started) for your bundler.
@@ -118,6 +124,7 @@ pnpm figma:check             # Check tokens, variants, and rendered components a
 pnpm figma:sync              # Refresh the Figma snapshot with FIGMA_TOKEN, then check
 pnpm playground:dev          # Start the web playground
 pnpm playground:mobile       # Start the Expo playground in the iOS Simulator
+pnpm swift:generate          # Regenerate the Swift package's TDS.swift from the Web variables
 pnpm test                    # Test package delivery and browser suites
 pnpm test:browser            # Run browser suites and update local screenshots
 pnpm test:browser:update     # Explicitly update screenshots

package/dist/web/components/Accordion.css

@@ -1 +1 @@
-.z_tds_2f_web-ctC8Bx0{color:var(--z-tds_2f_web-color-content-secondary,light-dark(var(--z-tds_2f_web-color-neutral-shade-056,#0000008f),var(--z-tds_2f_web-color-neutral-tint-064,#ffffffa3)))}.z_tds_2f_web-ctC8Bx1{padding-bottom:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-ctC8Bx2{font-family:var(--z-tds_2f_web-typography-body-b2-fontFamily,var(--z-tds_2f_web-fontFamily-body,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"))}.z_tds_2f_web-ctC8Bx3{font-size:var(--z-tds_2f_web-typography-body-b2-fontSize,14px)}.z_tds_2f_web-ctC8Bx4{font-weight:var(--z-tds_2f_web-typography-body-b2-fontWeight,400)}.z_tds_2f_web-ctC8Bx5{letter-spacing:var(--z-tds_2f_web-typography-body-b2-letterSpacing,.14px)}.z_tds_2f_web-ctC8Bx6{line-height:var(--z-tds_2f_web-typography-body-b2-lineHeight,20px)}.z_tds_2f_web-ctC8Bx7{margin:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-ctC8Bx8{flex-shrink:0}.z_tds_2f_web-ctC8Bx9{height:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-ctC8Bxa{transition-duration:var(--z-tds_2f_web-transitionDuration-240,.24s)}.z_tds_2f_web-ctC8Bxb{transition-property:transform}.z_tds_2f_web-ctC8Bxc{transition-timing-function:var(--z-tds_2f_web-ease-spring,cubic-bezier(.32, .72, 0, 1))}.z_tds_2f_web-ctC8Bxd{width:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-ctC8Bxe{[data-panel-open]>&{transform:rotate(180deg)}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-ctC8Bxf{transition-property:none}}.z_tds_2f_web-ctC8Bxg{border-bottom:1px solid}.z_tds_2f_web-ctC8Bxh{border-color:var(--z-tds_2f_web-color-line-secondary,light-dark(var(--z-tds_2f_web-color-neutral-shade-008,#00000014),var(--z-tds_2f_web-color-neutral-tint-008,#ffffff14)))}.z_tds_2f_web-ctC8Bxi{height:var(--accordion-panel-height)}.z_tds_2f_web-ctC8Bxj{overflow:hidden}.z_tds_2f_web-ctC8Bxk{transition-duration:var(--z-tds_2f_web-transitionDuration-240,.24s)}.z_tds_2f_web-ctC8Bxl{transition-property:height,opacity}.z_tds_2f_web-ctC8Bxm{&[data-ending-style]{transition-duration:var(--z-tds_2f_web-transitionDuration-180,.18s)}}.z_tds_2f_web-ctC8Bxn{&[data-ending-style],&[data-starting-style]{height:var(--z-tds_2f_web-spacing-0,0rem)}}.z_tds_2f_web-ctC8Bxo{&[data-ending-style],&[data-starting-style]{opacity:0}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-ctC8Bxp{transition-property:opacity}}.z_tds_2f_web-ctC8Bxq{display:flex}.z_tds_2f_web-ctC8Bxr{flex-direction:column}.z_tds_2f_web-ctC8Bxs{width:100%}.z_tds_2f_web-ctC8Bxt{&:where([data-size=large]){& [data-accordion-trigger]{min-height:var(--z-tds_2f_web-spacing-56,3.5rem)}}}.z_tds_2f_web-ctC8Bxu{&:where([data-size=large]){& [data-accordion-trigger]{padding-block:var(--z-tds_2f_web-spacing-12,.75rem)}}}.z_tds_2f_web-ctC8Bxv{&:where([data-size=large]){& [data-accordion-trigger]{font-family:var(--z-tds_2f_web-typography-body-b1Strong-fontFamily,var(--z-tds_2f_web-fontFamily-body,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"))}}}.z_tds_2f_web-ctC8Bxw{&:where([data-size=large]){& [data-accordion-trigger]{font-size:var(--z-tds_2f_web-typography-body-b1Strong-fontSize,16px)}}}.z_tds_2f_web-ctC8Bxx{&:where([data-size=large]){& [data-accordion-trigger]{font-weight:var(--z-tds_2f_web-typography-body-b1Strong-fontWeight,500)}}}.z_tds_2f_web-ctC8Bxy{&:where([data-size=large]){& [data-accordion-trigger]{letter-spacing:var(--z-tds_2f_web-typography-body-b1Strong-letterSpacing,.12px)}}}.z_tds_2f_web-ctC8Bxz{&:where([data-size=large]){& [data-accordion-trigger]{line-height:var(--z-tds_2f_web-typography-body-b1Strong-lineHeight,22px)}}}.z_tds_2f_web-ctC8Bx10{&:where([data-size=small]){& [data-accordion-trigger]{min-height:var(--z-tds_2f_web-spacing-32,2rem)}}}.z_tds_2f_web-ctC8Bx11{&:where([data-size=small]){& [data-accordion-trigger]{padding-block:var(--z-tds_2f_web-spacing-4,.25rem)}}}.z_tds_2f_web-ctC8Bx12{&:where([data-size=small]){& [data-accordion-trigger]{font-family:var(--z-tds_2f_web-typography-body-b3Strong-fontFamily,var(--z-tds_2f_web-fontFamily-body,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"))}}}.z_tds_2f_web-ctC8Bx13{&:where([data-size=small]){& [data-accordion-trigger]{font-size:var(--z-tds_2f_web-typography-body-b3Strong-fontSize,12px)}}}.z_tds_2f_web-ctC8Bx14{&:where([data-size=small]){& [data-accordion-trigger]{font-weight:var(--z-tds_2f_web-typography-body-b3Strong-fontWeight,500)}}}.z_tds_2f_web-ctC8Bx15{&:where([data-size=small]){& [data-accordion-trigger]{letter-spacing:var(--z-tds_2f_web-typography-body-b3Strong-letterSpacing,.15px)}}}.z_tds_2f_web-ctC8Bx16{&:where([data-size=small]){& [data-accordion-trigger]{line-height:var(--z-tds_2f_web-typography-body-b3Strong-lineHeight,16px)}}}.z_tds_2f_web-ctC8Bx17{align-items:center}.z_tds_2f_web-ctC8Bx18{background-color:#0000}.z_tds_2f_web-ctC8Bx19{border:none}.z_tds_2f_web-ctC8Bx1a{border-radius:var(--z-tds_2f_web-radius-2xs,calc(.5rem * var(--tds-corner-scale,1)))}.z_tds_2f_web-ctC8Bx1b{box-sizing:border-box}.z_tds_2f_web-ctC8Bx1c{color:var(--z-tds_2f_web-color-content-primary,light-dark(var(--z-tds_2f_web-color-neutral-100,#000),var(--z-tds_2f_web-color-neutral-000,#fff)))}.z_tds_2f_web-ctC8Bx1d{column-gap:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-ctC8Bx1e{cursor:pointer}.z_tds_2f_web-ctC8Bx1f{justify-content:space-between}.z_tds_2f_web-ctC8Bx1g{min-height:var(--z-tds_2f_web-spacing-40,2.5rem)}.z_tds_2f_web-ctC8Bx1h{outline-color:#0000}.z_tds_2f_web-ctC8Bx1i{outline-offset:var(--z-tds_2f_web-outlineOffset-0,0px)}.z_tds_2f_web-ctC8Bx1j{outline-style:solid}.z_tds_2f_web-ctC8Bx1k{outline-width:var(--z-tds_2f_web-outlineWidth-2,2px)}.z_tds_2f_web-ctC8Bx1l{padding-block:var(--z-tds_2f_web-spacing-8,.5rem)}.z_tds_2f_web-ctC8Bx1m{padding-inline:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-ctC8Bx1n{text-align:start}.z_tds_2f_web-ctC8Bx1o{transition-duration:var(--z-tds_2f_web-transitionDuration-160,.16s)}.z_tds_2f_web-ctC8Bx1p{transition-property:opacity,outline-color,outline-offset}.z_tds_2f_web-ctC8Bx1q{transition-timing-function:var(--z-tds_2f_web-ease-snappy,cubic-bezier(.23, 1, .32, 1))}.z_tds_2f_web-ctC8Bx1r{font-family:var(--z-tds_2f_web-typography-body-b2Strong-fontFamily,var(--z-tds_2f_web-fontFamily-body,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"))}.z_tds_2f_web-ctC8Bx1s{font-size:var(--z-tds_2f_web-typography-body-b2Strong-fontSize,14px)}.z_tds_2f_web-ctC8Bx1t{font-weight:var(--z-tds_2f_web-typography-body-b2Strong-fontWeight,500)}.z_tds_2f_web-ctC8Bx1u{letter-spacing:var(--z-tds_2f_web-typography-body-b2Strong-letterSpacing,.14px)}.z_tds_2f_web-ctC8Bx1v{line-height:var(--z-tds_2f_web-typography-body-b2Strong-lineHeight,20px)}.z_tds_2f_web-ctC8Bx1w{&:focus-visible{outline-color:var(--z-tds_2f_web-color-border-focus,light-dark(var(--z-tds_2f_web-color-neutral-shade-040,#0006),var(--z-tds_2f_web-color-neutral-tint-052,#ffffff85)))}}.z_tds_2f_web-ctC8Bx1x{&:focus-visible{outline-offset:var(--z-tds_2f_web-outlineOffset-2,2px)}}.z_tds_2f_web-ctC8Bx1y{&[data-disabled]{cursor:default}}.z_tds_2f_web-ctC8Bx1z{&[data-disabled]{opacity:var(--z-tds_2f_web-opacity-disabled,.32)}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-ctC8Bx20{transition-property:opacity,outline-color}}
+.z_tds_2f_web-ctC8Bx0{color:var(--z-tds_2f_web-color-content-secondary,light-dark(var(--z-tds_2f_web-color-neutral-shade-056,#0000008f),var(--z-tds_2f_web-color-neutral-tint-064,#ffffffa3)))}.z_tds_2f_web-ctC8Bx1{padding-bottom:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-ctC8Bx2{font-family:var(--z-tds_2f_web-typography-body-b2-fontFamily,var(--z-tds_2f_web-fontFamily-body,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"))}.z_tds_2f_web-ctC8Bx3{font-size:var(--z-tds_2f_web-typography-body-b2-fontSize,14px)}.z_tds_2f_web-ctC8Bx4{font-weight:var(--z-tds_2f_web-typography-body-b2-fontWeight,400)}.z_tds_2f_web-ctC8Bx5{letter-spacing:var(--z-tds_2f_web-typography-body-b2-letterSpacing,-.09px)}.z_tds_2f_web-ctC8Bx6{line-height:var(--z-tds_2f_web-typography-body-b2-lineHeight,20px)}.z_tds_2f_web-ctC8Bx7{margin:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-ctC8Bx8{flex-shrink:0}.z_tds_2f_web-ctC8Bx9{height:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-ctC8Bxa{transition-duration:var(--z-tds_2f_web-transitionDuration-240,.24s)}.z_tds_2f_web-ctC8Bxb{transition-property:transform}.z_tds_2f_web-ctC8Bxc{transition-timing-function:var(--z-tds_2f_web-ease-spring,cubic-bezier(.32, .72, 0, 1))}.z_tds_2f_web-ctC8Bxd{width:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-ctC8Bxe{[data-panel-open]>&{transform:rotate(180deg)}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-ctC8Bxf{transition-property:none}}.z_tds_2f_web-ctC8Bxg{border-bottom:1px solid}.z_tds_2f_web-ctC8Bxh{border-color:var(--z-tds_2f_web-color-line-secondary,light-dark(var(--z-tds_2f_web-color-neutral-shade-008,#00000014),var(--z-tds_2f_web-color-neutral-tint-008,#ffffff14)))}.z_tds_2f_web-ctC8Bxi{height:var(--accordion-panel-height)}.z_tds_2f_web-ctC8Bxj{overflow:hidden}.z_tds_2f_web-ctC8Bxk{transition-duration:var(--z-tds_2f_web-transitionDuration-240,.24s)}.z_tds_2f_web-ctC8Bxl{transition-property:height,opacity}.z_tds_2f_web-ctC8Bxm{&[data-ending-style]{transition-duration:var(--z-tds_2f_web-transitionDuration-180,.18s)}}.z_tds_2f_web-ctC8Bxn{&[data-ending-style],&[data-starting-style]{height:var(--z-tds_2f_web-spacing-0,0rem)}}.z_tds_2f_web-ctC8Bxo{&[data-ending-style],&[data-starting-style]{opacity:0}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-ctC8Bxp{transition-property:opacity}}.z_tds_2f_web-ctC8Bxq{display:flex}.z_tds_2f_web-ctC8Bxr{flex-direction:column}.z_tds_2f_web-ctC8Bxs{width:100%}.z_tds_2f_web-ctC8Bxt{&:where([data-size=large]){& [data-accordion-trigger]{min-height:var(--z-tds_2f_web-spacing-56,3.5rem)}}}.z_tds_2f_web-ctC8Bxu{&:where([data-size=large]){& [data-accordion-trigger]{padding-block:var(--z-tds_2f_web-spacing-12,.75rem)}}}.z_tds_2f_web-ctC8Bxv{&:where([data-size=large]){& [data-accordion-trigger]{font-family:var(--z-tds_2f_web-typography-body-b1Strong-fontFamily,var(--z-tds_2f_web-fontFamily-body,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"))}}}.z_tds_2f_web-ctC8Bxw{&:where([data-size=large]){& [data-accordion-trigger]{font-size:var(--z-tds_2f_web-typography-body-b1Strong-fontSize,16px)}}}.z_tds_2f_web-ctC8Bxx{&:where([data-size=large]){& [data-accordion-trigger]{font-weight:var(--z-tds_2f_web-typography-body-b1Strong-fontWeight,500)}}}.z_tds_2f_web-ctC8Bxy{&:where([data-size=large]){& [data-accordion-trigger]{letter-spacing:var(--z-tds_2f_web-typography-body-b1Strong-letterSpacing,-.18px)}}}.z_tds_2f_web-ctC8Bxz{&:where([data-size=large]){& [data-accordion-trigger]{line-height:var(--z-tds_2f_web-typography-body-b1Strong-lineHeight,22px)}}}.z_tds_2f_web-ctC8Bx10{&:where([data-size=small]){& [data-accordion-trigger]{min-height:var(--z-tds_2f_web-spacing-32,2rem)}}}.z_tds_2f_web-ctC8Bx11{&:where([data-size=small]){& [data-accordion-trigger]{padding-block:var(--z-tds_2f_web-spacing-4,.25rem)}}}.z_tds_2f_web-ctC8Bx12{&:where([data-size=small]){& [data-accordion-trigger]{font-family:var(--z-tds_2f_web-typography-body-b3Strong-fontFamily,var(--z-tds_2f_web-fontFamily-body,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"))}}}.z_tds_2f_web-ctC8Bx13{&:where([data-size=small]){& [data-accordion-trigger]{font-size:var(--z-tds_2f_web-typography-body-b3Strong-fontSize,12px)}}}.z_tds_2f_web-ctC8Bx14{&:where([data-size=small]){& [data-accordion-trigger]{font-weight:var(--z-tds_2f_web-typography-body-b3Strong-fontWeight,500)}}}.z_tds_2f_web-ctC8Bx15{&:where([data-size=small]){& [data-accordion-trigger]{letter-spacing:var(--z-tds_2f_web-typography-body-b3Strong-letterSpacing,.01px)}}}.z_tds_2f_web-ctC8Bx16{&:where([data-size=small]){& [data-accordion-trigger]{line-height:var(--z-tds_2f_web-typography-body-b3Strong-lineHeight,16px)}}}.z_tds_2f_web-ctC8Bx17{align-items:center}.z_tds_2f_web-ctC8Bx18{background-color:#0000}.z_tds_2f_web-ctC8Bx19{border:none}.z_tds_2f_web-ctC8Bx1a{border-radius:var(--z-tds_2f_web-radius-2xs,calc(.5rem * var(--tds-corner-scale,1)))}.z_tds_2f_web-ctC8Bx1b{box-sizing:border-box}.z_tds_2f_web-ctC8Bx1c{color:var(--z-tds_2f_web-color-content-primary,light-dark(var(--z-tds_2f_web-color-neutral-100,#000),var(--z-tds_2f_web-color-neutral-000,#fff)))}.z_tds_2f_web-ctC8Bx1d{column-gap:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-ctC8Bx1e{cursor:pointer}.z_tds_2f_web-ctC8Bx1f{justify-content:space-between}.z_tds_2f_web-ctC8Bx1g{min-height:var(--z-tds_2f_web-spacing-40,2.5rem)}.z_tds_2f_web-ctC8Bx1h{outline-color:#0000}.z_tds_2f_web-ctC8Bx1i{outline-offset:var(--z-tds_2f_web-outlineOffset-0,0px)}.z_tds_2f_web-ctC8Bx1j{outline-style:solid}.z_tds_2f_web-ctC8Bx1k{outline-width:var(--z-tds_2f_web-outlineWidth-2,2px)}.z_tds_2f_web-ctC8Bx1l{padding-block:var(--z-tds_2f_web-spacing-8,.5rem)}.z_tds_2f_web-ctC8Bx1m{padding-inline:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-ctC8Bx1n{text-align:start}.z_tds_2f_web-ctC8Bx1o{transition-duration:var(--z-tds_2f_web-transitionDuration-160,.16s)}.z_tds_2f_web-ctC8Bx1p{transition-property:opacity,outline-color,outline-offset}.z_tds_2f_web-ctC8Bx1q{transition-timing-function:var(--z-tds_2f_web-ease-snappy,cubic-bezier(.23, 1, .32, 1))}.z_tds_2f_web-ctC8Bx1r{font-family:var(--z-tds_2f_web-typography-body-b2Strong-fontFamily,var(--z-tds_2f_web-fontFamily-body,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"))}.z_tds_2f_web-ctC8Bx1s{font-size:var(--z-tds_2f_web-typography-body-b2Strong-fontSize,14px)}.z_tds_2f_web-ctC8Bx1t{font-weight:var(--z-tds_2f_web-typography-body-b2Strong-fontWeight,500)}.z_tds_2f_web-ctC8Bx1u{letter-spacing:var(--z-tds_2f_web-typography-body-b2Strong-letterSpacing,-.09px)}.z_tds_2f_web-ctC8Bx1v{line-height:var(--z-tds_2f_web-typography-body-b2Strong-lineHeight,20px)}.z_tds_2f_web-ctC8Bx1w{&:focus-visible{outline-color:var(--z-tds_2f_web-color-border-focus,light-dark(var(--z-tds_2f_web-color-neutral-shade-040,#0006),var(--z-tds_2f_web-color-neutral-tint-052,#ffffff85)))}}.z_tds_2f_web-ctC8Bx1x{&:focus-visible{outline-offset:var(--z-tds_2f_web-outlineOffset-2,2px)}}.z_tds_2f_web-ctC8Bx1y{&[data-disabled]{cursor:default}}.z_tds_2f_web-ctC8Bx1z{&[data-disabled]{opacity:var(--z-tds_2f_web-opacity-disabled,.32)}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-ctC8Bx20{transition-property:opacity,outline-color}}