Merge pull request #3310 from enquora/manual-tests-audit

Manual tests audit

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig reference: https://editorconfig.org
+# https://editorconfig.org/#file-format-details
+
+root = true
+
+[*]
+charset                   =  utf-8
+end_of_line               =  lf
+indent_size               =  4
+indent_style              =  space
+insert_final_newline      =  true
+trim_trailing_whitespace  =  true

.github/workflows/BuildAndTest.yml

@@ -0,0 +1,34 @@
+# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node build
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [24.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v4
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: echo "${PWD}/dist/cappuccino/bin" >> $GITHUB_PATH
+    - run: echo "${PWD}/dist/objective-j/bin" >> $GITHUB_PATH
+    - run: npm install
+    - run: npm update
+    - run: jake dist
+    - run: jake test-only

.github/workflows/main-branch-publish-manual-tests.yaml

@@ -0,0 +1,180 @@
+name: Main branch - Build Testbook with fresh frameworks and manual tests & deploy to GitHub Pages
+
+on:
+  push:
+    branches: [ main ]
+  workflow_dispatch:
+
+permissions:
+  contents: write
+  pages: write       # required by deploy-pages
+  id-token: write    # required by deploy-pages
+  pull-requests: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout cappuccino (this repo)
+        uses: actions/checkout@v5
+
+      - name: Checkout Cappuccino-Testbook into ./testbook
+        uses: actions/checkout@v5
+        with:
+          repository: ArgosOz/Cappuccino-Testbook
+          path: testbook
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24.x
+
+      - run: echo "${PWD}/dist/cappuccino/bin" >> $GITHUB_PATH
+      - run: echo "${PWD}/dist/objective-j/bin" >> $GITHUB_PATH
+      - run: npm install
+      - run: npm update
+      - run: jake dist
+      - run: jake test-only
+        
+      # Refresh Frameworks from dist → testbook/Frameworks
+      - name: Refresh Frameworks
+        run: |
+          set -euo pipefail
+          if [ ! -d dist ]; then
+            echo "❌ dist/ not found at repo root" >&2
+            exit 1
+          fi
+          mkdir -p testbook/Frameworks
+          rm -rf testbook/Frameworks/*
+          cp -a dist/cappuccino/Frameworks/{Foundation,AppKit} testbook/Frameworks/
+          cp -a dist/objective-j/Frameworks/Objective-J testbook/Frameworks/
+          echo "Frameworks populated:" && ls -la testbook/Frameworks || true
+
+      - name: Generate manifest of manual test directories
+        if: ${{ hashFiles('Tests/Manual/**') != '' }}
+        run: |
+          set -euo pipefail
+          mkdir -p artifacts
+          OUT="testbook/Resources/recipes.txt"
+          : > "$OUT"
+
+          if [ ! -d "Tests/Manual" ]; then
+            echo "❌ Tests/Manual not found at repo root" >&2
+            exit 1
+          fi
+
+          # Iterate over immediate subdirectories of Tests/Manual (null-safe for spaces)
+          while IFS= read -r -d '' d; do
+            name=$(basename "$d")
+            ts=$(date +%s%3N)  # milliseconds since epoch
+            printf '%s|%s|\n' "$ts" "$name" >> "$OUT"
+            # Optional tiny sleep to help keep timestamps distinct:
+            sleep 0.01
+          done < <(find "Tests/Manual" -mindepth 1 -maxdepth 1 -type d -print0 | sort -z)
+
+          echo "Wrote $OUT:"
+          cat "$OUT"        
+        
+      # Replace subdirectories inside testbook/Resources with Tests/Manual subdirectories
+      - name: Sync Resources from Tests/Manual
+        run: |
+          set -euo pipefail
+          if [ ! -d "Tests/Manual" ]; then
+            echo "❌ Tests/Manual not found at repo root" >&2
+            exit 1
+          fi
+          mkdir -p testbook/Resources
+          # Remove only immediate subdirectories (keep stray files if any)
+          find testbook/Resources -mindepth 1 -maxdepth 1 -type d -print0 | xargs -0 -r rm -rf
+          # Copy each immediate subdirectory from Tests/Manual → testbook/Resources
+          while IFS= read -r -d '' d; do
+            cp -a "$d" testbook/Resources/
+          done < <(find Tests/Manual -mindepth 1 -maxdepth 1 -type d -print0)
+          echo "Resources now contains:" && ls -la testbook/Resources || true
+
+      # Ensure each test Index.html includes the include path line before OBJJ_MAIN_FILE
+      - name: Inject OBJJ_INCLUDE_PATHS into Index.html files
+        run: |
+          set -euo pipefail
+          found=0
+          while IFS= read -r -d '' f; do
+            found=1
+            if grep -q 'OBJJ_INCLUDE_PATHS' "$f"; then
+              echo "Already updated: $f"
+              continue
+            fi
+            perl -0777 -i -pe 's/OBJJ_MAIN_FILE\s*=\s*"main\.j";/OBJJ_INCLUDE_PATHS = ["..\/..\/Frameworks"];\nOBJJ_MAIN_FILE = "main.j";/i' "$f"
+            perl -0777 -i -pe 's/Frameworks\/Objective-J\/Objective-J.js/\.\.\/\.\.\/Frameworks\/Objective-J\/Objective-J.js/' "$f"
+            echo "Updated: $f"
+          done < <(find testbook/Resources -mindepth 2 -maxdepth 2 -type f -iname "index.html" -print0)
+
+          if [ "$found" -eq 0 ]; then
+            echo "⚠️ No index.html files found under testbook/Resources/*/" >&2
+          fi
+
+      # Optional: prune VCS/CI metadata from the served content
+      - name: Clean testbook for Pages (optional)
+        run: |
+          set -euo pipefail
+          test -f testbook/index.html
+          test -d testbook/Resources
+          test -d testbook/Frameworks
+          rm -rf testbook/.git testbook/.github || true
+          find testbook -maxdepth 1 -type f -name ".git*" -delete || true
+
+      - name: Publish to gh-pages (preserve PR previews)
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          branch: gh-pages
+          folder: testbook
+          clean-exclude: pr-preview/   # keep PR preview folders
+          force: false                 # avoid force-push so previews survive
+
+      - name: Checkout gh-pages ./gh-pages
+        uses: actions/checkout@v5
+        with:
+          path: gh-pages
+          ref: gh-pages
+
+      - name: Clean gh-pages for Pages
+        run: |
+          set -euo pipefail
+          test -d gh-pages
+          rm -rf gh-pages/.git gh-pages/.github || true
+          find gh-pages -maxdepth 1 -type f -name ".git*" -delete || true
+          find gh-pages -type f -name "*.xib" -delete || true
+          find gh-pages -type f -name "*xcode*" -delete || true
+          find gh-pages -name "Jakefile" -delete || true
+
+      - name: Upload Pages artifact (testbook/)
+        uses: actions/upload-pages-artifact@v4
+        with:
+          path: gh-pages
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    concurrency:
+      group: pages
+      cancel-in-progress: true
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
+
+      - name: Comment Pages URL on PR
+        if: ${{ github.event_name == 'pull_request' }}
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const url = `${{ toJSON(steps.deployment.outputs.page_url) }}`;
+            const body = `📄 GitHub Pages preview for this PR:\n\n${url}`;
+            await github.rest.issues.createComment({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: context.issue.number,
+              body
+            });

.gitignore

@@ -5,6 +5,7 @@ Demos
 ./Aristo
 WebSite
 .push-package
+*.xcodeproj*
 *.xcodeproj/*.pbxuser
 *.xcodeproj/*.perspectivev3
 xcuserdata/
@@ -15,3 +16,15 @@ xcuserdata/
 Tests/Manual/**/*.xcodeproj
 *.sublime-project
 *.sublime-workspace
+*.tm_properties
+*.idea
+node_modules
+*.vscode
+/dist/objective-j/objj-executable
+/dist/objective-j/package.json
+/dist/objective-j/lib
+/dist/cappuccino/package.json
+/dist/cappuccino/lib
+/dist/cappuccino/bin
+Tests/Manual/.Frameworks
+/Tests/Manual/index.html

.npmignore

@@ -0,0 +1,28 @@
+.DS_Store
+Frameworks
+!/dist/objective-j/Frameworks
+!/dist/cappuccino-j/Frameworks
+Build
+Demos
+./Aristo
+WebSite
+.push-package
+*.xcodeproj*
+*.xcodeproj/*.pbxuser
+*.xcodeproj/*.perspectivev3
+xcuserdata/
+!*.xcodeproj/project.pbxproj
+*.xCodeSupport/
+*.XcodeSupport/
+*XcodeSupport/
+Tests/Manual/**/*.xcodeproj
+*.sublime-project
+*.sublime-workspace
+*.tm_properties
+*.idea
+node_modules
+*.vscode
+/dist/objective-j/objj-executable
+/dist/objective-j/package.json
+/dist/cappuccino/package.json
+

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
     - 0.8
-install: ./bootstrap.sh --quiet --noprompt --directory ./narwhal
+install: ./bootstrap.sh --noprompt --directory ./narwhal
 script: jake test
 env: PATH="$TRAVIS_BUILD_DIR/narwhal/bin:$PATH" CAPP_BUILD="$TRAVIS_BUILD_DIR/Build" NARWHAL_ENGINE=rhino

AppKit/AppKit.j

@@ -20,12 +20,15 @@
  * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
  */
 
+@import "_CPObject+Theme.j"
 @import "_CPToolTip.j"
 @import "CALayer.j"
 @import "CGGeometry.j"
 @import "CPAccordionView.j"
 @import "CPAlert.j"
 @import "CPAnimation.j"
+@import "CPAnimationContext.j"
+@import "CPAppearance.j"
 @import "CPApplication.j"
 @import "CPArrayController.j"
 @import "CPBezierPath.j"
@@ -59,8 +62,6 @@
 @import "CPDocument.j"
 @import "CPDocumentController.j"
 @import "CPEvent.j"
-@import "CPFlashMovie.j"
-@import "CPFlashView.j"
 @import "CPFont.j"
 @import "CPFontManager.j"
 @import "CPGradient.j"
@@ -92,21 +93,28 @@
 @import "CPSlider.j"
 @import "CPSound.j"
 @import "CPSplitView.j"
+@import "CPStackView.j"
 @import "CPStepper.j"
 @import "CPTableColumn.j"
 @import "CPTableView.j"
 @import "CPTabView.j"
 @import "CPText.j"
 @import "CPTextField.j"
+@import "CPTextView.j"
 @import "CPTokenField.j"
 @import "CPToolbar.j"
 @import "CPToolbarItem.j"
+@import "CPTrackingArea.j"
 @import "CPTreeNode.j"
 @import "CPUserDefaultsController.j"
 @import "CPView.j"
+@import "CPViewAnimator.j"
 @import "CPViewAnimation.j"
 @import "CPViewController.j"
+@import "CPVisualEffectView.j"
 @import "CPWebView.j"
 @import "CPWindow.j"
 @import "CPWindowController.j"
 @import "CPWorkspace.j"
+@import "CPFontPanel.j"
+@import "CPTreeController.j"

AppKit/CPAlert.j

@@ -41,6 +41,10 @@
 
 @global CPApp
 
+var CPAlertDelegate_alertShowHelp_              = 1 << 0,
+    CPAlertDelegate_alertDidEnd_returnCode_     = 1 << 1;
+
+@typedef CPAlertStyle
 /*
     @global
     @group CPAlertStyle
@@ -59,6 +63,62 @@ CPCriticalAlertStyle        = 2;
 
 var bottomHeight = 71;
 
+@protocol CPAlertDelegate <CPObject>
+
+@optional
+- (BOOL)alertShowHelp:(CPAlert)alert;
+- (void)alertDidEnd:(CPAlert)theAlert returnCode:(int)returnCode;
+
+@end
+
+
+@implementation _CPAlertThemeView : CPView
+
++ (CPString)defaultThemeClass
+{
+    return @"alert";
+}
+
++ (CPDictionary)themeAttributes
+{
+    return @{
+            @"size": CGSizeMake(400.0, 110.0),
+            @"content-inset": CGInsetMake(15, 15, 15, 50),
+            @"informative-offset": 6,
+            @"button-offset": 10,
+            @"message-text-alignment": CPJustifiedTextAlignment,
+            @"message-text-color": [CPColor blackColor],
+            @"message-text-font": [CPFont boldSystemFontOfSize:13.0],
+            @"message-text-shadow-color": [CPNull null],
+            @"message-text-shadow-offset": CGSizeMakeZero(),
+            @"informative-text-alignment": CPJustifiedTextAlignment,
+            @"informative-text-color": [CPColor blackColor],
+            @"informative-text-font": [CPFont systemFontOfSize:12.0],
+            @"informative-text-shadow-color": [CPNull null],
+            @"informative-text-shadow-offset": CGSizeMakeZero(),
+            @"image-offset": CGPointMake(15, 12),
+            @"information-image": [CPNull null],
+            @"warning-image": [CPNull null],
+            @"error-image": [CPNull null],
+            @"help-image": [CPNull null],
+            @"help-image-left-offset": 15,
+            @"help-image-pressed": [CPNull null],
+            @"suppression-button-y-offset": 0.0,
+            @"suppression-button-x-offset": 0.0,
+            @"default-elements-margin": 3.0,
+            @"suppression-button-text-color": [CPColor blackColor],
+            @"suppression-button-text-font": [CPFont systemFontOfSize:12.0],
+            @"suppression-button-text-shadow-color": [CPNull null],
+            @"suppression-button-text-shadow-offset": 0.0,
+            @"modal-window-button-margin-y": 0.0,
+            @"modal-window-button-margin-x": 0.0,
+            @"standard-window-button-margin-y": 0.0,
+            @"standard-window-button-margin-x": 0.0,
+        };
+}
+
+@end
+
 /*!
     @ingroup appkit
 
@@ -83,35 +143,36 @@ var bottomHeight = 71;
 */
 @implementation CPAlert : CPObject
 {
-    BOOL                _showHelp               @accessors(property=showsHelp);
-    BOOL                _showSuppressionButton  @accessors(property=showsSuppressionButton);
+    BOOL                    _showHelp                   @accessors(property=showsHelp);
+    BOOL                    _showSuppressionButton      @accessors(property=showsSuppressionButton);
 
-    CPAlertStyle        _alertStyle             @accessors(property=alertStyle);
-    CPString            _title                  @accessors(property=title);
-    CPView              _accessoryView          @accessors(property=accessoryView);
-    CPImage             _icon                   @accessors(property=icon);
+    CPAlertStyle            _alertStyle                 @accessors(property=alertStyle);
+    CPString                _title                      @accessors(property=title);
+    CPView                  _accessoryView              @accessors(property=accessoryView);
+    CPImage                 _icon                       @accessors(property=icon);
 
-    CPArray             _buttons                @accessors(property=buttons, readonly);
-    CPCheckBox          _suppressionButton      @accessors(property=suppressionButton, readonly);
+    CPArray                 _buttons                    @accessors(property=buttons, readonly);
+    CPCheckBox              _suppressionButton          @accessors(property=suppressionButton, readonly);
 
-    id                  _delegate               @accessors(property=delegate);
-    id                  _modalDelegate;
-    SEL                 _didEndSelector         @accessors(property=didEndSelector);
-    Function            _didEndBlock;
+    id <CPAlertDelegate>    _delegate                   @accessors(property=delegate);
+    id                      _modalDelegate;
+    SEL                     _didEndSelector             @accessors(property=didEndSelector);
+    Function                _didEndBlock;
+    unsigned                _implementedDelegateMethods;
 
-    _CPAlertThemeView   _themeView              @accessors(property=themeView, readonly);
-    CPWindow            _window                 @accessors(property=window, readonly);
-    int                 _defaultWindowStyle;
+    _CPAlertThemeView       _themeView                  @accessors(property=themeView, readonly);
+    CPWindow                _window                     @accessors(property=window, readonly);
+    int                     _defaultWindowStyle;
 
-    CPImageView         _alertImageView;
-    CPTextField         _informativeLabel;
-    CPTextField         _messageLabel;
-    CPButton            _alertHelpButton;
+    CPImageView             _alertImageView;
+    CPTextField             _informativeLabel;
+    CPTextField             _messageLabel;
+    CPButton                _alertHelpButton;
 
-    BOOL                _needsLayout;
+    BOOL                    _needsLayout;
 }
 
-#pragma mark Creating Alerts
+// MARK: Creating Alerts
 
 /*!
     Returns a CPAlert object with the provided info
@@ -187,7 +248,31 @@ var bottomHeight = 71;
     return self;
 }
 
-#pragma mark Accessors
+
+// MARK: -
+// MARK: Delegate
+
+/*!
+    Set the delegate of the receiver
+    @param aDelegate the delegate object for the alert.
+*/
+- (void)setDelegate:(id <CPAlertDelegate>)aDelegate
+{
+    if (_delegate === aDelegate)
+        return;
+
+    _delegate = aDelegate;
+    _implementedDelegateMethods = 0;
+
+    if ([_delegate respondsToSelector:@selector(alertShowHelp:)])
+        _implementedDelegateMethods |= CPAlertDelegate_alertShowHelp_;
+
+    if ([_delegate respondsToSelector:@selector(alertDidEnd:returnCode:)])
+        _implementedDelegateMethods |= CPAlertDelegate_alertDidEnd_returnCode_;
+}
+
+
+// MARK: Accessors
 
 - (CPTheme)theme
 {
@@ -219,7 +304,7 @@ var bottomHeight = 71;
     [_themeView setValue:aValue forThemeAttribute:aName];
 }
 
-- (void)setValue:(id)aValue forThemeAttribute:(CPString)aName inState:(CPThemeState)aState
+- (void)setValue:(id)aValue forThemeAttribute:(CPString)aName inState:(ThemeState)aState
 {
     [_themeView setValue:aValue forThemeAttribute:aName inState:aState];
 }
@@ -317,7 +402,7 @@ var bottomHeight = 71;
     _needsLayout = YES;
 }
 
-#pragma mark Accessing Buttons
+// MARK: Accessing Buttons
 
 /*!
     Adds a button with a given title to the receiver.
@@ -353,7 +438,7 @@ var bottomHeight = 71;
     [_buttons insertObject:button atIndex:0];
 }
 
-#pragma mark Layout
+// MARK: Layout
 
 /*!
     @ignore
@@ -579,7 +664,7 @@ var bottomHeight = 71;
     _needsLayout = NO;
 }
 
-#pragma mark Displaying Alerts
+// MARK: Displaying Alerts
 
 /*!
     Displays the \c CPAlert panel as a modal dialog. The user will not be
@@ -657,7 +742,7 @@ var bottomHeight = 71;
     [self beginSheetModalForWindow:aWindow modalDelegate:nil didEndSelector:nil contextInfo:nil];
 }
 
-#pragma mark Private
+// MARK: Private
 
 /*!
     @ignore
@@ -696,8 +781,7 @@ var bottomHeight = 71;
 */
 - (@action)_showHelp:(id)aSender
 {
-    if ([_delegate respondsToSelector:@selector(alertShowHelp:)])
-        [_delegate alertShowHelp:self];
+    [self _sendDelegateAlertShowHelp];
 }
 
 /*
@@ -737,62 +821,44 @@ var bottomHeight = 71;
     else if (_modalDelegate)
     {
         if (_didEndSelector)
-            objj_msgSend(_modalDelegate, _didEndSelector, self, returnCode, contextInfo);
+            _modalDelegate.isa.objj_msgSend3(_modalDelegate, _didEndSelector, self, returnCode, contextInfo);
     }
     else if (_delegate)
     {
         if (_didEndSelector)
-            objj_msgSend(_delegate, _didEndSelector, self, returnCode);
-        else if ([_delegate respondsToSelector:@selector(alertDidEnd:returnCode:)])
-            [_delegate alertDidEnd:self returnCode:returnCode];
+            _delegate.isa.objj_msgSend2(_delegate, _didEndSelector, self, returnCode);
+        else
+            [self _sendDelegateAlertDidEndReturnCode:returnCode];
     }
 }
 
 @end
 
-@implementation _CPAlertThemeView : CPView
 
-+ (CPString)defaultThemeClass
+@implementation CPAlert (CPAlertDelegate)
+
+/*!
+    @ignore
+    Call the delegate alertDidEnd:returnCode
+*/
+- (void)_sendDelegateAlertDidEndReturnCode:(int)returnCode
 {
-    return @"alert";
+    if (!(_implementedDelegateMethods & CPAlertDelegate_alertDidEnd_returnCode_))
+        return;
+
+    [_delegate alertDidEnd:self returnCode:returnCode];
 }
 
-+ (CPDictionary)themeAttributes
+/*!
+    @ignore
+    Call the delegate alertShowHelp:
+*/
+- (BOOL)_sendDelegateAlertShowHelp
 {
-    return @{
-            @"size": CGSizeMake(400.0, 110.0),
-            @"content-inset": CGInsetMake(15, 15, 15, 50),
-            @"informative-offset": 6,
-            @"button-offset": 10,
-            @"message-text-alignment": CPJustifiedTextAlignment,
-            @"message-text-color": [CPColor blackColor],
-            @"message-text-font": [CPFont boldSystemFontOfSize:13.0],
-            @"message-text-shadow-color": [CPNull null],
-            @"message-text-shadow-offset": CGSizeMakeZero(),
-            @"informative-text-alignment": CPJustifiedTextAlignment,
-            @"informative-text-color": [CPColor blackColor],
-            @"informative-text-font": [CPFont systemFontOfSize:12.0],
-            @"informative-text-shadow-color": [CPNull null],
-            @"informative-text-shadow-offset": CGSizeMakeZero(),
-            @"image-offset": CGPointMake(15, 12),
-            @"information-image": [CPNull null],
-            @"warning-image": [CPNull null],
-            @"error-image": [CPNull null],
-            @"help-image": [CPNull null],
-            @"help-image-left-offset": 15,
-            @"help-image-pressed": [CPNull null],
-            @"suppression-button-y-offset": 0.0,
-            @"suppression-button-x-offset": 0.0,
-            @"default-elements-margin": 3.0,
-            @"suppression-button-text-color": [CPColor blackColor],
-            @"suppression-button-text-font": [CPFont systemFontOfSize:12.0],
-            @"suppression-button-text-shadow-color": [CPNull null],
-            @"suppression-button-text-shadow-offset": 0.0,
-            @"modal-window-button-margin-y": 0.0,
-            @"modal-window-button-margin-x": 0.0,
-            @"standard-window-button-margin-y": 0.0,
-            @"standard-window-button-margin-x": 0.0,
-        };
+    if (!(_implementedDelegateMethods & CPAlertDelegate_alertShowHelp_))
+        return YES;
+
+    return [_delegate alertShowHelp:self];
 }
 
 @end

AppKit/CPAnimation.j

@@ -26,25 +26,26 @@
 @import "CAMediaTimingFunction.j"
 
 
-/*
-    @global
-    @group CPAnimationCurve
-*/
+@protocol CPAnimationDelegate <CPObject>
+
+@optional
+- (BOOL)animationShouldStart:(CPAnimation)animation;
+- (float)animation:(CPAnimation)animation valueForProgress:(float)progress;
+- (void)animationDidEnd:(CPAnimation)animation;
+- (void)animationDidStop:(CPAnimation)animation;
+
+@end
+
+
+var CPAnimationDelegate_animationShouldStart_       = 1 << 1,
+    CPAnimationDelegate_animation_valueForProgress_ = 1 << 2,
+    CPAnimationDelegate_animationDidEnd_            = 1 << 3,
+    CPAnimationDelegate_animationDidStop_           = 1 << 4;
+
+@typedef CPAnimationCurve
 CPAnimationEaseInOut    = 0;
-/*
-    @global
-    @group CPAnimationCurve
-*/
 CPAnimationEaseIn       = 1;
-/*
-    @global
-    @group CPAnimationCurve
-*/
 CPAnimationEaseOut      = 2;
-/*
-    @global
-    @group CPAnimationCurve
-*/
 CPAnimationLinear       = 3;
 
 ACTUAL_FRAME_RATE = 0;
@@ -80,17 +81,18 @@ ACTUAL_FRAME_RATE = 0;
 */
 @implementation CPAnimation : CPObject
 {
-    CPTimeInterval          _lastTime;
-    CPTimeInterval          _duration;
+    CPTimeInterval              _lastTime;
+    CPTimeInterval              _duration;
 
-    CPAnimationCurve        _animationCurve;
-    CAMediaTimingFunction   _timingFunction;
+    CPAnimationCurve            _animationCurve;
+    CAMediaTimingFunction       _timingFunction;
 
-    float                   _frameRate;
-    float                   _progress;
+    float                       _frameRate;
+    float                       _progress;
 
-    id                      _delegate;
-    CPTimer                 _timer;
+    id <CPAnimationDelegate>    _delegate;
+    CPTimer                     _timer;
+    unsigned                    _implementedDelegateMethods;
 }
 
 /*!
@@ -214,9 +216,25 @@ ACTUAL_FRAME_RATE = 0;
     Sets the animation's delegate.
     @param aDelegate the new delegate
 */
-- (void)setDelegate:(id)aDelegate
+- (void)setDelegate:(id <CPAnimationDelegate>)aDelegate
 {
+    if (_delegate === aDelegate)
+        return;
+
     _delegate = aDelegate;
+    _implementedDelegateMethods = 0;
+
+    if ([_delegate respondsToSelector:@selector(animationShouldStart:)])
+        _implementedDelegateMethods |= CPAnimationDelegate_animationShouldStart_;
+
+    if ([_delegate respondsToSelector:@selector(animationDidEnd:)])
+        _implementedDelegateMethods |= CPAnimationDelegate_animationDidEnd_;
+
+    if ([_delegate respondsToSelector:@selector(animationDidStop:)])
+        _implementedDelegateMethods |= CPAnimationDelegate_animationDidStop_;
+
+    if ([_delegate respondsToSelector:@selector(animation:valueForProgress:)])
+        _implementedDelegateMethods |= CPAnimationDelegate_animation_valueForProgress_;
 }
 
 /*!
@@ -227,7 +245,7 @@ ACTUAL_FRAME_RATE = 0;
 - (void)startAnimation
 {
     // If we're already animating, or our delegate stops us, animate.
-    if (_timer || _delegate && [_delegate respondsToSelector:@selector(animationShouldStart:)] && ![_delegate animationShouldStart:self])
+    if (_timer || ![self _sendDelegateAnimationShouldStart])
         return;
 
     if (_progress === 1.0)
@@ -236,7 +254,7 @@ ACTUAL_FRAME_RATE = 0;
     ACTUAL_FRAME_RATE = 0;
     _lastTime = new Date();
 
-    var timerInterval = _frameRate <= 0.0 ? 0.0001 : 1.0/_frameRate;
+    var timerInterval = _frameRate <= 0.0 ? 0.0001 : 1.0 / _frameRate;
 
     _timer = [CPTimer scheduledTimerWithTimeInterval:timerInterval target:self selector:@selector(animationTimerDidFire:) userInfo:nil repeats:YES];
 }
@@ -260,8 +278,7 @@ ACTUAL_FRAME_RATE = 0;
         [_timer invalidate];
         _timer = nil;
 
-        if ([_delegate respondsToSelector:@selector(animationDidEnd:)])
-            [_delegate animationDidEnd:self];
+        [self _sendDelegateAnimationDidEnd];
     }
 }
 
@@ -276,8 +293,7 @@ ACTUAL_FRAME_RATE = 0;
     [_timer invalidate];
     _timer = nil;
 
-    if ([_delegate respondsToSelector:@selector(animationDidStop:)])
-        [_delegate animationDidStop:self];
+    [self _sendDelegateAnimationDidStop];
 }
 
 /*!
@@ -313,8 +329,8 @@ ACTUAL_FRAME_RATE = 0;
 {
     var t = [self currentProgress];
 
-    if ([_delegate respondsToSelector:@selector(animation:valueForProgress:)])
-        return [_delegate animation:self valueForProgress:t];
+    if ([self _delegateRespondsToAnimationValueForProgress])
+        return [self _sendDelegateAnimationValueForProgress:t];
 
     if (_animationCurve == CPAnimationLinear)
         return t;
@@ -330,6 +346,68 @@ ACTUAL_FRAME_RATE = 0;
 
 @end
 
+
+@implementation CPAnimation (CPAnimationDelegate)
+
+/*!
+    @ignore
+    Check if the delegate responds to animation:valueForProgress:
+*/
+- (BOOL)_delegateRespondsToAnimationValueForProgress
+{
+    return _implementedDelegateMethods & CPAnimationDelegate_animation_valueForProgress_;
+}
+
+/*!
+    @ignore
+    Call delegate animationShouldStart:
+*/
+- (BOOL)_sendDelegateAnimationShouldStart
+{
+    if (!(_implementedDelegateMethods & CPAnimationDelegate_animationShouldStart_))
+        return YES;
+
+    return [_delegate animationShouldStart:self];
+}
+
+/*!
+    @ignore
+    Call delegate animation:valueForProgress:
+*/
+- (float)_sendDelegateAnimationValueForProgress:(float)aProgress
+{
+    if (!(_implementedDelegateMethods & CPAnimationDelegate_animation_valueForProgress_))
+        return aProgress;
+
+    return [_delegate animation:self valueForProgress:aProgress];
+}
+
+/*!
+    @ignore
+    Call delegate animationDidEnd:
+*/
+- (void)_sendDelegateAnimationDidEnd
+{
+    if (!(_implementedDelegateMethods & CPAnimationDelegate_animationDidEnd_))
+        return;
+
+    [_delegate animationDidEnd:self];
+}
+
+/*!
+    @ignore
+    Call delegate animationDidStop:
+*/
+- (void)_sendDelegateAnimationDidStop
+{
+    if (!(_implementedDelegateMethods & CPAnimationDelegate_animationDidStop_))
+        return;
+
+    [_delegate animationDidStop:self];
+}
+
+@end
+
 // currently used function to determine time
 // 1:1 conversion to js from webkit source files
 // UnitBezier.h, WebCore_animation_AnimationBase.cpp

AppKit/CPAppearance.j

@@ -0,0 +1,162 @@
+/*
+ * CPAppearance.j
+ * AppKit
+ *
+ * Created by Antoine Mercadal.
+ * Copyright 2015, Cappuccino Project.
+ *
+ * This library is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 2.1 of the License, or (at your option) any later version.
+ *
+ * This library is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this library; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
+ */
+
+@import <Foundation/Foundation.j>
+@import "CPTheme.j"
+
+CPAppearanceNameAqua         = @"CPAppearanceNameAqua";
+CPAppearanceNameLightContent = @"CPAppearanceNameLightContent";
+CPAppearanceNameVibrantDark  = @"CPAppearanceNameVibrantDark";
+CPAppearanceNameVibrantLight = @"CPAppearanceNameVibrantLight";
+
+var _CPAppearanceCurrent = nil,
+    _CPAppearancesRegistry = @{};
+
+
+@protocol CPAppearanceCustomization <CPObject>
+
+@required
+- (CPAppearance)appearance;
+- (void)setAppearance:(CPAppearance)appearance;
+- (CPAppearance)effectiveAppearance;
+- (void)setEffectiveAppearance:(CPAppearance)appearance;
+
+@end
+
+CPThemeStateAppearanceAqua             = CPThemeState("appearance-aqua");
+CPThemeStateAppearanceLightContent     = CPThemeState("appearance-light-content");
+CPThemeStateAppearanceVibrantLight     = CPThemeState("appearance-vibrant-light");
+CPThemeStateAppearanceVibrantDark      = CPThemeState("appearance-vibrant-dark");
+
+
+/*!
+    @ingroup appkit
+
+    A CPAppareance represents the appearance of an to a subset of UI elements.
+    This is a very lightweight implementation of the NSAppearance system, but
+    We are using it for compliance, and especially for the CPVisualEffectView
+*/
+@implementation CPAppearance : CPObject
+{
+    BOOL            _allowsVibrancy     @accessors(property=allowsVibrancy);
+
+    CPString        _name;
+}
+
+
+// MARK: -
+// MARK: Class Methods
+
+/*! Returns the current default CPAppearance
+*/
++ (CPAppearance)currentAppearance
+{
+    if (!_CPAppearanceCurrent)
+        _CPAppearanceCurrent = [CPAppearance appearanceNamed:CPAppearanceNameAqua];
+
+    return _CPAppearanceCurrent;
+}
+
+/*! Sets the current default CPAppearance
+    @param appearance the new current appearance
+*/
++ (void)setCurrentAppearance:(CPAppearance)anAppearance
+{
+    _CPAppearanceCurrent = anAppearance;
+}
+
+/*! Returns the CPAppearance object with the given name
+    @param name the name of the appearance
+*/
++ (CPAppearance)appearanceNamed:(CPString)aName
+{
+    if (![_CPAppearancesRegistry containsKey:aName])
+    {
+        [_CPAppearancesRegistry setObject:[[CPAppearance alloc] initWithAppearanceNamed:aName bundle:nil]
+                                   forKey:aName];
+    }
+
+    return [_CPAppearancesRegistry objectForKey:aName];
+}
+
+
+// MARK: -
+// MARK: Initialization
+
+/*! Creates a CPAppearance object initialized to the specified appearance file in the specified bundle
+    This method does actually nothing special. It just creates a default appearance object
+*/
+- (id)initWithAppearanceNamed:(CPString)aName bundle:(CPBundle)bundle
+{
+    if (self = [super init])
+    {
+        _name = aName;
+        _allowsVibrancy = YES;
+
+        if ([_CPAppearancesRegistry containsKey:aName])
+            [CPException raise:CPInternalInconsistencyException reason:"Appearance with name '" + aName + "' is already declared."];
+
+        [_CPAppearancesRegistry setObject:self forKey:aName];
+    }
+
+    return self;
+}
+
+
+// MARK: -
+// MARK: Implementation
+
+- (BOOL)isEqual:(id)anObject
+{
+    if (![anObject isKindOfClass:CPAppearance])
+        return NO;
+
+    return self._name == anObject._name;
+}
+
+- (CPString)description
+{
+    return @"<CPAppearance @" + [self UID] + @" name: " + _name + ">";
+}
+
+
+// MARK: -
+// MARK: CPCoding
+
+- (id)initWithCoder:(CPCoder)aCoder
+{
+    if (self = [super init])
+    {
+        _name           = [aCoder decodeObjectForKey:@"_name"];
+        _allowsVibrancy = [aCoder decodeBoolForKey:@"_allowsVibrancy"];
+    }
+
+    return self;
+}
+
+- (void)encodeWithCoder:(CPCoder)aCoder
+{
+    [aCoder encodeObject:_name forKey:@"_name"];
+    [aCoder encodeBool:_allowsVibrancy forKey:@"_allowsVibrancy"];
+}
+
+@end

AppKit/CPApplication.j

@@ -37,10 +37,32 @@
 @import "CPWindowController.j"
 @import "_CPPopoverWindow.j"
 
+@typedef CPModalSession
+
 var CPMainCibFile               = @"CPMainCibFile",
     CPMainCibFileHumanFriendly  = @"Main cib file base name",
     CPEventModifierFlags = 0;
 
+
+@protocol CPApplicationDelegate <CPObject>
+
+@optional
+- (CPApplicationTerminateReply)applicationShouldTerminate:(CPApplication)sender;
+- (CPString)applicationShouldTerminateMessage:(CPApplication)sender;
+- (void)applicationDidBecomeActive:(CPNotification)aNotification;
+- (void)applicationDidChangeScreenParameters:(CPNotification)aNotification;
+- (void)applicationDidFinishLaunching:(CPNotification)aNotification;
+- (void)applicationDidResignActive:(CPNotification)aNotification;
+- (void)applicationWillBecomeActive:(CPNotification)aNotification;
+- (void)applicationWillFinishLaunching:(CPNotification)aNotification;
+- (void)applicationWillResignActive:(CPNotification)aNotification;
+- (void)applicationWillTerminate:(CPNotification)aNotification;
+
+@end
+
+var CPApplicationDelegate_applicationShouldTerminate_           = 1 << 0,
+    CPApplicationDelegate_applicationShouldTerminateMessage_    = 1 << 1;
+
 /*!
     @ingroup appkit
     @class CPApplication
@@ -68,36 +90,38 @@ var CPMainCibFile               = @"CPMainCibFile",
 */
 @implementation CPApplication : CPResponder
 {
-    CPArray                 _eventListeners;
-    int                     _eventListenerInsertionIndex;
+    CPArray                     _eventListeners;
+    int                         _eventListenerInsertionIndex;
 
-    CPEvent                 _currentEvent;
-    CPWindow                _lastMouseMoveWindow;
+    CPEvent                     _currentEvent;
+    CPWindow                    _lastMouseMoveWindow;
 
-    CPArray                 _windows;
-    CPWindow                _keyWindow;
-    CPWindow                _mainWindow;
-    CPWindow                _previousKeyWindow;
-    CPWindow                _previousMainWindow;
+    CPArray                     _windows;
+    CPWindow                    _keyWindow;
+    CPWindow                    _mainWindow;
+    CPWindow                    _previousKeyWindow;
+    CPWindow                    _previousMainWindow;
 
-    CPDocumentController    _documentController;
+    CPDocumentController        _documentController;
 
-    CPModalSession          _currentSession;
+    CPModalSession              _currentSession;
 
     //
-    id                      _delegate;
-    BOOL                    _finishedLaunching;
-    BOOL                    _isActive;
+    id <CPApplicationDelegate>  _delegate;
+    CPInteger                   _implementedDelegateMethods;
 
-    CPDictionary            _namedArgs;
-    CPArray                 _args;
-    CPString                _fullArgsString;
+    BOOL                        _finishedLaunching;
+    BOOL                        _isActive;
 
-    CPImage                 _applicationIconImage;
+    CPDictionary                _namedArgs;
+    CPArray                     _args;
+    CPString                    _fullArgsString;
 
-    CPPanel                 _aboutPanel;
+    CPImage                     _applicationIconImage;
 
-    CPThemeBlend            _themeBlend @accessors(property=themeBlend);
+    CPPanel                     _aboutPanel;
+
+    CPThemeBlend                _themeBlend @accessors(property=themeBlend);
 }
 
 /*!
@@ -108,7 +132,7 @@ var CPMainCibFile               = @"CPMainCibFile",
 + (CPApplication)sharedApplication
 {
     if (!CPApp)
-        CPApp = [[CPApplication alloc] init];
+        CPApp = [[self alloc] init];
 
     return CPApp;
 }
@@ -143,11 +167,13 @@ var CPMainCibFile               = @"CPMainCibFile",
     react to these events.
     @param aDelegate the delegate object
 */
-- (void)setDelegate:(id)aDelegate
+- (void)setDelegate:(id <CPApplicationDelegate>)aDelegate
 {
     if (_delegate == aDelegate)
         return;
 
+    _implementedDelegateMethods = 0;
+
     var defaultCenter = [CPNotificationCenter defaultCenter],
         delegateNotifications =
         [
@@ -188,6 +214,12 @@ var CPMainCibFile               = @"CPMainCibFile",
         if ([_delegate respondsToSelector:selector])
             [defaultCenter addObserver:_delegate selector:selector name:notificationName object:self];
     }
+
+    if ([_delegate respondsToSelector:@selector(applicationShouldTerminate:)])
+        _implementedDelegateMethods |= CPApplicationDelegate_applicationShouldTerminate_;
+
+    if ([_delegate respondsToSelector:@selector(applicationShouldTerminateMessage:)])
+        _implementedDelegateMethods |= CPApplicationDelegate_applicationShouldTerminateMessage_
 }
 
 /*!
@@ -409,12 +441,7 @@ var CPMainCibFile               = @"CPMainCibFile",
 {
     // callback method for terminate:
     if (didCloseAll)
-    {
-        if ([_delegate respondsToSelector:@selector(applicationShouldTerminate:)])
-            [self replyToApplicationShouldTerminate:[_delegate applicationShouldTerminate:self]];
-        else
-            [self replyToApplicationShouldTerminate:YES];
-    }
+        [self replyToApplicationShouldTerminate:[self _sendDelegateApplicationShouldTerminate]];
 }
 
 - (void)replyToApplicationShouldTerminate:(BOOL)terminate
@@ -428,16 +455,22 @@ var CPMainCibFile               = @"CPMainCibFile",
 
 - (void)activateIgnoringOtherApps:(BOOL)shouldIgnoreOtherApps
 {
+    if (_isActive)
+        return;
+
     [self _willBecomeActive];
 
     [CPPlatform activateIgnoringOtherApps:shouldIgnoreOtherApps];
     _isActive = YES;
 
-    [self _willResignActive];
+    [self _didBecomeActive];
 }
 
 - (void)deactivate
 {
+    if (!_isActive)
+        return;
+
     [self _willResignActive];
 
     [CPPlatform deactivate];
@@ -446,7 +479,7 @@ var CPMainCibFile               = @"CPMainCibFile",
     [self _didResignActive];
 }
 
-- (void)isActive
+- (BOOL)isActive
 {
     return _isActive;
 }
@@ -463,6 +496,15 @@ var CPMainCibFile               = @"CPMainCibFile",
 - (void)run
 {
     [self finishLaunching];
+    [self sendEvent:[CPEvent otherEventWithType:CPAppKitDefined
+                                       location:CGPointMakeZero()
+                                  modifierFlags:0
+                                      timestamp:[CPEvent currentTimestamp]
+                                   windowNumber:[_keyWindow windowNumber]
+                                        context:nil
+                                        subtype:nil
+                                          data1:nil
+                                          data2:nil]];
 }
 
 // Managing the Event Loop
@@ -586,11 +628,6 @@ var CPMainCibFile               = @"CPMainCibFile",
 
     var theWindow = [anEvent window];
 
-    // Check if this is a candidate for key equivalent...
-    if ([anEvent _couldBeKeyEquivalent] && [self _handleKeyEquivalent:anEvent])
-        // The key equivalent was handled.
-        return;
-
     if ([anEvent type] == CPMouseMoved)
     {
         if (theWindow !== _lastMouseMoveWindow)
@@ -627,6 +664,11 @@ var CPMainCibFile               = @"CPMainCibFile",
 
     _eventListenerInsertionIndex = _eventListeners.length;
 
+    // Check if this is a candidate for key equivalent...
+    if ([anEvent _couldBeKeyEquivalent] && [self _handleKeyEquivalent:anEvent])
+        // The key equivalent was handled.
+        return;
+
     if (theWindow)
         [theWindow sendEvent:anEvent];
 }
@@ -942,7 +984,7 @@ var CPMainCibFile               = @"CPMainCibFile",
 */
 - (void)setTarget:(id)aTarget selector:(SEL)aSelector forNextEventMatchingMask:(unsigned int)aMask untilDate:(CPDate)anExpiration inMode:(CPString)aMode dequeue:(BOOL)shouldDequeue
 {
-    _eventListeners.splice(_eventListenerInsertionIndex++, 0, _CPEventListenerMake(aMask, function (anEvent) { objj_msgSend(aTarget, aSelector, anEvent); }, shouldDequeue));
+    _eventListeners.splice(_eventListenerInsertionIndex++, 0, _CPEventListenerMake(aMask, function (anEvent) { if (aTarget != null) aTarget.isa.objj_msgSend1(aTarget, aSelector, anEvent); }, shouldDequeue));
 }
 
 /*!
@@ -971,7 +1013,9 @@ var CPMainCibFile               = @"CPMainCibFile",
         return;
     }
 
-    [aSheet._windowView _enableSheet:YES inWindow:aWindow];
+    if (![aWindow attachedSheet])
+        [aSheet._windowView _enableSheet:YES inWindow:aWindow];
+
     [aWindow _attachSheet:aSheet modalDelegate:aModalDelegate didEndSelector:didEndSelector contextInfo:contextInfo];
 }
 
@@ -1158,7 +1202,7 @@ var CPMainCibFile               = @"CPMainCibFile",
         [[self keyWindow] orderFront:self];
     else if ([self mainWindow])
         [[self mainWindow] makeKeyAndOrderFront:self];
-    else
+    else if ([self mainMenu])
         [[self mainMenu]._menuWindow makeKeyWindow]; //FIXME this may not actually work
 
     _previousKeyWindow = nil;
@@ -1176,6 +1220,22 @@ var CPMainCibFile               = @"CPMainCibFile",
                                                       userInfo:nil];
 }
 
+- (BOOL)_sendDelegateApplicationShouldTerminate
+{
+    if (!(_implementedDelegateMethods & CPApplicationDelegate_applicationShouldTerminate_))
+        return YES;
+
+    return [_delegate applicationShouldTerminate:self];
+}
+
+- (CPString)_sendDelegateApplicationShouldTerminateMessage
+{
+    if (!(_implementedDelegateMethods & CPApplicationDelegate_applicationShouldTerminateMessage_))
+        return @"You have attempted to leave this page. Are you sure you want to exit this page?";
+
+    return [_delegate applicationShouldTerminateMessage:self];
+}
+
 - (void)_didResignActive
 {
     if (self._activeMenu)
@@ -1298,7 +1358,7 @@ var _CPAppBootstrapperActions = nil;
     {
         var action = _CPAppBootstrapperActions.shift();
 
-        if (objj_msgSend(self, action))
+        if (self.isa.objj_msgSend0(self, action))
             return;
     }
 

AppKit/CPApplication_Constants.j

@@ -31,6 +31,7 @@ CPApplicationWillResignActiveNotification           = @"CPApplicationWillResignA
 CPApplicationDidResignActiveNotification            = @"CPApplicationDidResignActiveNotification";
 CPApplicationDidChangeScreenParametersNotification  = @"CPApplicationDidChangeScreenParametersNotification";
 
+@typedef CPApplicationTerminateReply
 CPTerminateNow      = YES;
 CPTerminateCancel   = NO;
 CPTerminateLater    = -1; // not currently supported

AppKit/CPArrayController.j

@@ -23,7 +23,7 @@
  */
 
 @import <Foundation/CPIndexSet.j>
-
+@import <Foundation/CPPredicate.j>
 @import "CPObjectController.j"
 @import "CPKeyValueBinding.j"
 
@@ -219,17 +219,6 @@
     _clearsFilterPredicateOnInsertion = aFlag;
 }
 
-/*!
-    Whether the receiver will always return the multiple values marker when multiple
-    items are selected, even if the items have the same value.
-
-    @return BOOL YES if the receiver always uses the multiple values marker
-*/
-- (BOOL)alwaysUsesMultipleValuesMarker
-{
-    return _alwaysUsesMultipleValuesMarker;
-}
-
 /*!
     Sets whether the receiver should always return the multiple values marker when multiple
     items are selected, even if the items have the same value.
@@ -282,7 +271,7 @@
     if (_disableSetContent)
         return;
 
-    if (value === nil)
+    if (value == nil)
         value = [];
 
     if (![value isKindOfClass:[CPArray class]])
@@ -308,27 +297,18 @@
         class.
     */
 
-    if (_clearsFilterPredicateOnInsertion)
-        [self willChangeValueForKey:@"filterPredicate"];
-
     // Don't use [super setContent:] as that would fire the contentObject change.
     // We need to be in control of when notifications fire.
     // Note that if we have a contentArray binding, setting the content does /not/
     // cause a reverse binding set.
     _contentObject = value;
 
-    if (_clearsFilterPredicateOnInsertion && _filterPredicate != nil)
-        [self __setFilterPredicate:nil]; // Causes a _rearrangeObjects.
-    else
-        [self _rearrangeObjects];
+    [self _rearrangeObjects];
 
     if ([self preservesSelection])
         [self __setSelectedObjects:oldSelectedObjects];
     else
         [self __setSelectionIndexes:oldSelectionIndexes];
-
-    if (_clearsFilterPredicateOnInsertion)
-        [self didChangeValueForKey:@"filterPredicate"];
 }
 
 /*!
@@ -563,7 +543,7 @@
 */
 - (BOOL)setSelectionIndexes:(CPIndexSet)indexes
 {
-    [self _selectionWillChange]
+    [self _selectionWillChange];
     var r = [self __setSelectionIndexes:indexes avoidEmpty:NO];
     [self _selectionDidChange];
     return r;
@@ -629,6 +609,25 @@
 
     return YES;
 }
+- (void)_selectionWillChange
+{
+    // Push back all data from the dirty editors before it is too late.
+
+    var editorsCount = [_editors count];
+
+    while (editorsCount--)
+    {
+        var allBindings = [CPBinder allBindingsForObject:_editors[editorsCount]],
+            allKeys = [allBindings allKeys],
+            keysCount = allKeys.length;
+
+            while (keysCount--)
+                [[allBindings objectForKey:allKeys[keysCount]] reverseSetValueFor:allKeys[keysCount]];
+    }
+
+    [super _selectionWillChange];
+}
+
 
 /*!
     Returns an array of the selected objects.
@@ -774,7 +773,7 @@
         _filterPredicate = nil;
         [self _rearrangeObjects];
     }
-    else if (_filterPredicate === nil || [_filterPredicate evaluateWithObject:object])
+    else if (_filterPredicate == nil || [_filterPredicate evaluateWithObject:object])
     {
         // Insert directly into the array.
         var pos = [_arrangedObjects insertObject:object inArraySortedByDescriptors:_sortDescriptors];
@@ -787,7 +786,7 @@
             [_selectionIndexes shiftIndexesStartingAtIndex:pos by:1];
     }
     /*
-    else if (_filterPredicate !== nil)
+    else if (_filterPredicate != nil)
     ...
     // Implies _filterPredicate && ![_filterPredicate evaluateWithObject:object], so the new object does
     // not appear in arrangedObjects and we do not have to update at all.
@@ -887,7 +886,7 @@
 
     _disableSetContent = NO;
 
-    if (_filterPredicate === nil || [_filterPredicate evaluateWithObject:object])
+    if (_filterPredicate == nil || [_filterPredicate evaluateWithObject:object])
     {
         // selectionIndexes change notification will be fired as a result of the
         // content change. Don't fire manually.

AppKit/CPBezierPath.j

@@ -231,7 +231,7 @@ var DefaultLineWidth = 1.0;
 /*!
     Cocoa compatibility.
 */
-- (void)getLineDash:(CPArrayRef)patternRef count:(NSInteger)count phase:(CGFloatRef)phaseRef
+- (void)getLineDash:(CPArrayRef)patternRef count:(CPInteger)count phase:(CGFloatRef)phaseRef
 {
     return [self getLineDash:patternRef phase:phaseRef];
 }
@@ -250,7 +250,7 @@ var DefaultLineWidth = 1.0;
 /*!
     Cocoa compatibility.
 */
-- (void)setLineDash:(CPArray)aPattern count:(NSInteger)count phase:(CGFloat)aPhase
+- (void)setLineDash:(CPArray)aPattern count:(CPInteger)count phase:(CGFloat)aPhase
 {
     [self setLineDash:aPattern phase:aPhase];
 }
@@ -378,3 +378,47 @@ var DefaultLineWidth = 1.0;
 }
 
 @end
+
+
+@implementation CPBezierPath (AnimationAdditions)
+
+- (CPString)SVGString
+{
+    var pathString = "";
+    var elements = _path.elements;
+    var count = _path.count;
+
+    for (var i = 0; i < count; i++)
+    {
+        var element = elements[i];
+
+        // Use the kCGPathElement* constants defined in CGPath.j
+        switch (element.type)
+        {
+            case kCGPathElementMoveToPoint:
+                pathString += "M " + element.x + " " + element.y + " ";
+                break;
+
+            case kCGPathElementAddLineToPoint:
+                pathString += "L " + element.x + " " + element.y + " ";
+                break;
+
+            case kCGPathElementAddQuadCurveToPoint:
+                pathString += "Q " + element.cpx + " " + element.cpy + " " + element.x + " " + element.y + " ";
+                break;
+
+            case kCGPathElementAddCurveToPoint:
+                pathString += "C " + element.cp1x + " " + element.cp1y + " " + element.cp2x + " " + element.cp2y + " " + element.x + " " + element.y + " ";
+                break;
+
+            case kCGPathElementCloseSubpath:
+                pathString += "Z ";
+                break;
+        }
+    }
+
+    return pathString.trim();
+}
+
+@end
+

AppKit/CPBox.j

@@ -22,21 +22,25 @@
 
 @import "CPTextField.j"
 @import "CPView.j"
+@import <Foundation/CPGeometry.j>
 
 // CPBoxType
+@typedef CPBoxType
 CPBoxPrimary    = 0;
-CPBoxSecondary  = 1;
+CPBoxSecondary  = 1; // Deprecated
 CPBoxSeparator  = 2;
-CPBoxOldStyle   = 3;
+CPBoxOldStyle   = 3; // Deprecated
 CPBoxCustom     = 4;
 
 // CPBorderType
+@typedef CPBorderType
 CPNoBorder      = 0;
 CPLineBorder    = 1;
 CPBezelBorder   = 2;
 CPGrooveBorder  = 3;
 
 // CPTitlePosition
+@typedef CPTitlePosition
 CPNoTitle     = 0;
 CPAboveTop    = 1;
 CPAtTop       = 2;
@@ -55,12 +59,16 @@ CPBelowBottom = 6;
 @implementation CPBox : CPView
 {
     CPBoxType       _boxType;
-    CPBorderType    _borderType;
+    CPBorderType    _borderType;    // deprecated
     CPView          _contentView;
+    CPView          _boxView;       // needed for CSS theming, will be transparent for non CSS themes
+    BOOL            _transparent    @accessors(getter=isTransparent);
 
-    CPString        _title @accessors(getter=title);
-    int             _titlePosition @accessors(getter=titlePosition);
+    CPString        _title          @accessors(getter=title);
+    int             _titlePosition  @accessors(getter=titlePosition);
     CPTextField     _titleView;
+
+    BOOL            _cachedAutoresizesSubviews;
 }
 
 + (Class)_binderClassForBinding:(CPString)aBinding
@@ -87,6 +95,14 @@ CPBelowBottom = 6;
             @"inner-shadow-size": 6.0,
             @"inner-shadow-color": [CPNull null],
             @"content-margin": CGSizeMakeZero(),
+            @"title-font": [CPNull null],
+            @"title-left-offset": 5.0,
+            @"title-top-offset": 0.0,
+            @"title-color": [CPNull null],
+            @"nib2cib-adjustment-primary-frame": CGRectMake(4, -4, -8, -6),
+            @"content-adjustment": CGRectMakeZero(),
+            @"min-y-correction-no-title": 0,
+            @"min-y-correction-title": 0
         };
 }
 
@@ -111,16 +127,26 @@ CPBelowBottom = 6;
 
     if (self)
     {
-        _borderType = CPBezelBorder;
+        _borderType = CPGrooveBorder; // Was CPBezelBorder but Cocoa default is CPGrooveBorder
+        _boxType    = CPBoxPrimary;
 
         _titlePosition = CPNoTitle;
         _titleView = [CPTextField labelWithTitle:@""];
+        [_titleView setFont:[self titleFont]];
+        [_titleView setTextColor:[self titleColor]];
+
+        _boxView = [[CPView alloc] initWithFrame:[self bounds]];
+        [_boxView setAutoresizingMask:CPViewWidthSizable | CPViewHeightSizable];
 
         _contentView = [[CPView alloc] initWithFrame:[self bounds]];
         [_contentView setAutoresizingMask:CPViewWidthSizable | CPViewHeightSizable];
 
         [self setAutoresizesSubviews:YES];
-        [self addSubview:_contentView];
+        [self addSubview:_boxView];
+        [_boxView setAutoresizesSubviews:YES];
+        [_boxView addSubview:_contentView];
+
+        [self sizeToFit];
     }
 
     return self;
@@ -152,6 +178,8 @@ CPBelowBottom = 6;
 */
 - (CPBorderType)borderType
 {
+    CPLog.warn("CPBox borderType is deprecated.");
+
     return _borderType;
 }
 
@@ -174,7 +202,8 @@ CPBelowBottom = 6;
         return;
 
     _borderType = aBorderType;
-    [self setNeedsDisplay:YES];
+
+    [self refreshDisplay];
 }
 
 /*!
@@ -214,13 +243,46 @@ CPBelowBottom = 6;
 */
 - (void)setBoxType:(CPBoxType)aBoxType
 {
+    if ((aBoxType == CPBoxSecondary) || (aBoxType == CPBoxOldStyle))
+        CPLog.warn("CPBox setBoxType: CPBoxSecondary and CPBoxOldStyle are deprecated.");
+
     if (_boxType === aBoxType)
         return;
 
     _boxType = aBoxType;
-    [self setNeedsDisplay:YES];
+
+    [self refreshDisplay];
 }
 
+- (void)setTransparent:(BOOL)shouldBeTransparent
+{
+    if (_transparent == shouldBeTransparent)
+        return;
+
+    _transparent = shouldBeTransparent;
+
+    [self _manageTitlePositioning];
+}
+
+// MARK: -
+// MARK: Style properties which override theme values
+/*!
+    The borderColor, borderWidth, cornerRadius and fillColor properties for the receiver
+    are only supported for boxes with boxType === CPBoxCustom and borderType === CPLineBorder.
+    Boxes with the Primary boxType have fixed values which are defined by the system theme.
+    Apple does support lineTypes of Groove and Bezel for boxes of type CPBoxCustom, CPBoxSecondary and CPBoxOldStyle,
+    but they are deprecated as of macOS 10.15.
+
+    Cappuccino has supported these in the past but no longer does so - both to simplify CSS-based theming and
+    to avoid the effort needed for supporting something which will be very short-lived.
+
+    These styles can be recreated as custom theme elements by developers, as needed.
+    Additionally, boxes with boxType === CPBoxSeparator (horizontal and vertical lines) have never allowed changing these values.
+    No warnings are generated for separator boxes.
+*/
+
+// See discussion above.
+// MARK: borderColor
 - (CPColor)borderColor
 {
     return [self valueForThemeAttribute:@"border-color"];
@@ -228,12 +290,25 @@ CPBelowBottom = 6;
 
 - (void)setBorderColor:(CPColor)color
 {
+    if (_boxType === CPBoxSeparator)
+    {
+        return;
+    }
+    
+    if ((_boxType !== CPBoxCustom) || (_borderType !== CPLineBorder))
+    {
+        CPLog.warn("CPBox setBorderColor: the box must be of type CPBoxCustom AND border of type CPLineBorder in order to use setBorderColor. Property is ignored.");
+        return;
+    }
+
     if ([color isEqual:[self borderColor]])
         return;
 
     [self setValue:color forThemeAttribute:@"border-color"];
 }
 
+// See discussion above.
+// MARK: borderWidth
 - (float)borderWidth
 {
     return [self valueForThemeAttribute:@"border-width"];
@@ -241,12 +316,25 @@ CPBelowBottom = 6;
 
 - (void)setBorderWidth:(float)width
 {
+    if (_boxType === CPBoxSeparator)
+    {
+        return;
+    }
+    
+    if ((_boxType !== CPBoxCustom) || (_borderType !== CPLineBorder))
+    {
+        CPLog.warn("CPBox setBorderWidth: the box must be of type CPBoxCustom AND border of type CPLineBorder in order to use setBorderWidth. Property is ignored.");
+        return;
+    }
+
     if (width === [self borderWidth])
         return;
 
     [self setValue:width forThemeAttribute:@"border-width"];
 }
 
+// See discussion above.
+// MARK: cornerRadius
 - (float)cornerRadius
 {
     return [self valueForThemeAttribute:@"corner-radius"];
@@ -254,12 +342,25 @@ CPBelowBottom = 6;
 
 - (void)setCornerRadius:(float)radius
 {
+    if (_boxType === CPBoxSeparator)
+    {
+        return;
+    }
+    
+    if ((_boxType !== CPBoxCustom) || (_borderType !== CPLineBorder))
+    {
+        CPLog.warn("CPBox setCornerRadius: the box must be of type CPBoxCustom AND border of type CPLineBorder in order to use setCornerRadius. Property is ignored.");
+        return;
+    }
+
     if (radius === [self cornerRadius])
         return;
 
     [self setValue:radius forThemeAttribute:@"corner-radius"];
 }
 
+// See discussion above.
+// MARK: fillColor
 - (CPColor)fillColor
 {
     return [self valueForThemeAttribute:@"background-color"];
@@ -267,6 +368,17 @@ CPBelowBottom = 6;
 
 - (void)setFillColor:(CPColor)color
 {
+    if (_boxType === CPBoxSeparator)
+    {
+        return;
+    }
+    
+    if ((_boxType !== CPBoxCustom) || (_borderType !== CPLineBorder))
+    {
+        CPLog.warn("CPBox setFillColor: the box must be of type CPBoxCustom AND border of type CPLineBorder in order to use setFillColor. Property is ignored.");
+        return;
+    }
+
     if ([color isEqual:[self fillColor]])
         return;
 
@@ -283,21 +395,20 @@ CPBelowBottom = 6;
     if (aView === _contentView)
         return;
 
-    var borderWidth = [self borderWidth],
-        contentMargin = [self valueForThemeAttribute:@"content-margin"];
-
-    [aView setFrame:CGRectInset([self bounds], contentMargin.width + borderWidth, contentMargin.height + borderWidth)];
     [aView setAutoresizingMask:CPViewWidthSizable | CPViewHeightSizable];
 
     //  A nil contentView is allowed (tested in Cocoa 2013-02-22).
     if (!aView)
         [_contentView removeFromSuperview];
     else if (_contentView)
-        [self replaceSubview:_contentView with:aView];
+        [_boxView replaceSubview:_contentView with:aView];
     else
-        [self addSubview:aView];
+        [_boxView addSubview:aView];
 
     _contentView = aView;
+
+    [self sizeToFit];
+    [self refreshDisplay];
 }
 
 - (CGSize)contentViewMargins
@@ -317,9 +428,14 @@ CPBelowBottom = 6;
 {
     var offset = [self _titleHeightOffset],
         borderWidth = [self borderWidth],
-        contentMargin = [self valueForThemeAttribute:@"content-margin"];
+        contentMargin = [self valueForThemeAttribute:@"content-margin"],
+        contentAdjustment = [self valueForThemeAttribute:@"content-adjustment"],
+        minYCorrection = [self valueForThemeAttribute:(_titlePosition === CPNoTitle ? @"min-y-correction-no-title" : @"min-y-correction-title")];
 
-    [self setFrame:CGRectInset(aRect, -(contentMargin.width + borderWidth), -(contentMargin.height + offset[0] + borderWidth))];
+    [self setFrame:CGRectMake(aRect.origin.x - contentAdjustment.origin.x - contentMargin.width  + borderWidth,
+                              aRect.origin.y - contentAdjustment.origin.y - contentMargin.height + borderWidth - minYCorrection,
+                              aRect.size.width  + 2 * contentMargin.width  - contentAdjustment.size.width,
+                              aRect.size.height + 2 * contentMargin.height - contentAdjustment.size.height)];
 }
 
 - (void)setTitle:(CPString)aTitle
@@ -344,14 +460,42 @@ CPBelowBottom = 6;
 
 - (CPFont)titleFont
 {
-    return [_titleView font];
+    if ([self hasThemeAttribute:@"title-font"])
+        return [self valueForThemeAttribute:@"title-font"];
+    else
+        return [_titleView font];
 }
 
 - (void)setTitleFont:(CPFont)aFont
 {
+    if ([aFont isEqual:[self titleFont]])
+        return;
+
+    if ([self hasThemeAttribute:@"title-font"])
+        [self setValue:aFont forThemeAttribute:@"title-font"];
+
     [_titleView setFont:aFont];
 }
 
+- (CPColor)titleColor
+{
+    if ([self hasThemeAttribute:@"title-color"])
+        return [self valueForThemeAttribute:@"title-color"];
+    else
+        return [_titleView textColor];
+}
+
+- (void)setTitleColor:(CPColor)aColor
+{
+    if ([aColor isEqual:[self titleColor]])
+        return;
+
+    if ([self hasThemeAttribute:@"title-color"])
+        [self setValue:aColor forThemeAttribute:@"title-color"];
+
+    [_titleView setTextColor:aColor];
+}
+
 /*!
     Return the text field used to display the receiver's title.
 
@@ -362,25 +506,39 @@ CPBelowBottom = 6;
     return _titleView;
 }
 
+/*!
+    Return the rectangle in which the receiver’s title is drawn.
+ */
+- (CGRect)titleRect
+{
+    return [_titleView frame];
+}
+
 - (void)_manageTitlePositioning
 {
-    if (_titlePosition == CPNoTitle)
+    if ((_titlePosition == CPNoTitle) || _transparent)
     {
         [_titleView removeFromSuperview];
-        [self setNeedsDisplay:YES];
+
+        if (_boxType !== CPBoxSeparator)
+            [self sizeToFit];
+
+        [self refreshDisplay];
         return;
     }
 
     [_titleView setStringValue:_title];
     [_titleView sizeToFit];
-    [self addSubview:_titleView];
+
+    var titleLeftOffset = [self valueForThemeAttribute:@"title-left-offset"],
+        titleTopOffset  = [self valueForThemeAttribute:@"title-top-offset"];
 
     switch (_titlePosition)
     {
         case CPAtTop:
         case CPAboveTop:
         case CPBelowTop:
-            [_titleView setFrameOrigin:CGPointMake(5.0, 0.0)];
+            [_titleView setFrameOrigin:CGPointMake(titleLeftOffset, titleTopOffset)]; // FIXME: was 0.0
             [_titleView setAutoresizingMask:CPViewNotSizable];
             break;
 
@@ -388,39 +546,51 @@ CPBelowBottom = 6;
         case CPAtBottom:
         case CPBelowBottom:
             var h = [_titleView frameSize].height;
-            [_titleView setFrameOrigin:CGPointMake(5.0, [self frameSize].height - h)];
+            [_titleView setFrameOrigin:CGPointMake(titleLeftOffset, [self frameSize].height - h - titleTopOffset)];
             [_titleView setAutoresizingMask:CPViewMinYMargin];
             break;
     }
 
+    if (!_transparent)
+        [self addSubview:_titleView];
+
     [self sizeToFit];
-    [self setNeedsDisplay:YES];
+    [self refreshDisplay];
 }
 
 - (void)sizeToFit
 {
-    var contentFrame = [_contentView frame],
-        offset = [self _titleHeightOffset],
-        contentMargin = [self valueForThemeAttribute:@"content-margin"];
+    var offset = [self _titleHeightOffset],
+        size = [self frameSize];
 
-    if (!contentFrame)
+    [_boxView setFrame:CGRectMake(0, offset[1], size.width, size.height - offset[0])];
+
+    if (!_contentView)
         return;
 
-    [_contentView setFrameOrigin:CGPointMake(contentMargin.width, contentMargin.height + offset[1])];
+    var boxSize = [_boxView frameSize],
+        contentMargin = [self valueForThemeAttribute:@"content-margin"],
+        contentAdjustment = [self valueForThemeAttribute:@"content-adjustment"],
+        borderWidth = [self valueForThemeAttribute:@"border-width"],
+        minYCorrection = [self valueForThemeAttribute:(_titlePosition === CPNoTitle ? @"min-y-correction-no-title" : @"min-y-correction-title")];
+
+    [_contentView setFrame:CGRectMake(contentAdjustment.origin.x + contentMargin.width  - borderWidth,
+                                      contentAdjustment.origin.y + contentMargin.height - borderWidth + minYCorrection,
+                                      boxSize.width  - 2 * contentMargin.width  + contentAdjustment.size.width,
+                                      boxSize.height - 2 * contentMargin.height + contentAdjustment.size.height)];
 }
 
-- (float)_titleHeightOffset
+- (CPArray)_titleHeightOffset
 {
-    if (_titlePosition == CPNoTitle)
-        return [0.0, 0.0];
+    var titleTopOffset = [self valueForThemeAttribute:@"title-top-offset"];
 
     switch (_titlePosition)
     {
         case CPAtTop:
-            return [[_titleView frameSize].height, [_titleView frameSize].height];
+            return [[_titleView frameSize].height + titleTopOffset, [_titleView frameSize].height + titleTopOffset];
 
         case CPAtBottom:
-            return [[_titleView frameSize].height, 0.0];
+            return [[_titleView frameSize].height + titleTopOffset, 0.0];
 
         default:
             return [0.0, 0.0];
@@ -437,21 +607,24 @@ CPBelowBottom = 6;
 
 - (void)drawRect:(CGRect)rect
 {
+    if ([self isCSSBased] && (_boxType !== CPBoxCustom))
+        return;
+
     var bounds = [self bounds];
 
-    switch (_boxType)
+    if (_boxType === CPBoxSeparator)
     {
-        case CPBoxSeparator:
-            // NSBox does not include a horizontal flag for the separator type. We have to determine
-            // the type of separator to draw by the width and height of the frame.
-            if (CGRectGetWidth(bounds) === 5.0)
-                return [self _drawVerticalSeparatorInRect:bounds];
-            else if (CGRectGetHeight(bounds) === 5.0)
-                return [self _drawHorizontalSeparatorInRect:bounds];
-
-            break;
+        // NSBox does not include a horizontal flag for the separator type. We have to determine
+        // the type of separator to draw by the width and height of the frame.
+        if (CGRectGetWidth(bounds) === 5.0)
+            return [self _drawVerticalSeparatorInRect:bounds];
+        else if (CGRectGetHeight(bounds) === 5.0)
+            return [self _drawHorizontalSeparatorInRect:bounds];
     }
 
+    if (_transparent)
+        return;
+
     if (_titlePosition == CPAtTop)
     {
         bounds.origin.y += [_titleView frameSize].height;
@@ -472,9 +645,6 @@ CPBelowBottom = 6;
     switch (_borderType)
     {
         case CPBezelBorder:
-            [self _drawBezelBorderInRect:bounds];
-            break;
-
         case CPGrooveBorder:
         case CPLineBorder:
             [self _drawLineBorderInRect:bounds];
@@ -591,11 +761,83 @@ CPBelowBottom = 6;
 
 @end
 
+// MARK: -
+
+@implementation CPBox (CSSTheming)
+
+- (void)layoutSubviews
+{
+    if (![self isCSSBased] || (_boxType === CPBoxCustom))
+        return;
+
+    var bounds = [self bounds];
+
+    if (_boxType === CPBoxSeparator)
+    {
+        if (bounds.size.width === 5.0)
+        {
+            // Vertical separator
+            [_boxView setFrame:CGRectMake(2,0,1,bounds.size.height)];
+        }
+        else
+        {
+            // Horizontal separator
+            [_boxView setFrame:CGRectMake(0,2,bounds.size.width,1)];
+        }
+
+        [_boxView setBackgroundColor:[self valueForThemeAttribute:@"border-color"]];
+
+        return;
+    }
+
+    // All types of boxes (beside custom which is not covered here) always draw the same way, unless they are CPNoBorder.
+    if ((_borderType !== CPNoBorder) && !_transparent)
+    {
+        [_boxView setBackgroundColor:[self valueForThemeAttribute:@"background-color"]];
+        return;
+    }
+
+    // No border or transparent
+    [_boxView setBackgroundColor:nil];
+}
+
+- (BOOL)isCSSBased
+{
+    return [[self theme] isCSSBased];
+}
+
+- (void)refreshDisplay
+{
+    if ([self isCSSBased] && (_boxType !== CPBoxCustom))
+        [self setNeedsLayout:YES];
+    else
+        [self setNeedsDisplay:YES];
+}
+
+- (void)setAutoresizesSubviews:(BOOL)flag
+{
+    // CPBox should always resize its subviews, like in Cocoa, whatever is the corresponding flag set.
+    // We have to keep the flag value as we could have to return it in -autoresizesSubview method.
+    _cachedAutoresizesSubviews = !!flag;
+    [super setAutoresizesSubviews:YES];
+}
+
+- (BOOL)autoresizesSubview
+{
+    return _cachedAutoresizesSubviews;
+}
+
+@end
+
+// MARK: -
+
 var CPBoxTypeKey          = @"CPBoxTypeKey",
     CPBoxBorderTypeKey    = @"CPBoxBorderTypeKey",
-    CPBoxTitle            = @"CPBoxTitle",
-    CPBoxTitlePosition    = @"CPBoxTitlePosition",
-    CPBoxTitleView        = @"CPBoxTitleView";
+    CPBoxTitleKey         = @"CPBoxTitleKey",
+    CPBoxTitlePositionKey = @"CPBoxTitlePositionKey",
+    CPBoxTitleViewKey     = @"CPBoxTitleViewKey",
+    CPBoxContentViewKey   = @"CPBoxContentViewKey",
+    CPBoxBoxViewKey       = @"CPBoxBoxViewKey";
 
 @implementation CPBox (CPCoding)
 
@@ -608,16 +850,56 @@ var CPBoxTypeKey          = @"CPBoxTypeKey",
         _boxType       = [aCoder decodeIntForKey:CPBoxTypeKey];
         _borderType    = [aCoder decodeIntForKey:CPBoxBorderTypeKey];
 
-        _title         = [aCoder decodeObjectForKey:CPBoxTitle];
-        _titlePosition = [aCoder decodeIntForKey:CPBoxTitlePosition];
-        _titleView     = [aCoder decodeObjectForKey:CPBoxTitleView] || [CPTextField labelWithTitle:_title];
+        _title         = [aCoder decodeObjectForKey:CPBoxTitleKey];
+        _titlePosition = [aCoder decodeIntForKey:CPBoxTitlePositionKey];
 
-        _contentView   = [self subviews][0];
+        // Important : see comment on encodeWithCoder below
+
+        _boxView = [aCoder decodeObjectForKey:CPBoxBoxViewKey];
+
+        if (!_boxView)
+        {
+            // We're coming from nib2cib.
+
+            _boxView     = [[CPView alloc] initWithFrame:[self bounds]];
+            _titleView   = [CPTextField labelWithTitle:_title];
+        }
+        else
+        {
+            // We're coming from elsewhere
+
+            _titleView   = [aCoder decodeObjectForKey:CPBoxTitleViewKey];
+        }
+
+        _contentView = [aCoder decodeObjectForKey:CPBoxContentViewKey];
+
+        // FIXME: super-mega-hyper-trick : _contentView has a superview which is not normal !
+        // FIXME: (see encodeWithCoder to understand why this is not possible)
+        // FIXME: we fix this by hand. This is horrible so please find a structural solution !
+
+        if (_contentView)
+            _contentView._superview = nil;
 
-        [self setAutoresizesSubviews:YES];
         [_contentView setAutoresizingMask:CPViewWidthSizable | CPViewHeightSizable];
+        [_boxView     setAutoresizingMask:CPViewWidthSizable | CPViewHeightSizable];
+        [_boxView     setAutoresizesSubviews:YES];
+        [self         setAutoresizesSubviews:YES];
+
+        if (_contentView)
+            [_boxView setSubviews:@[_contentView]];
+
+        [self addSubview:_boxView];
+        [self addSubview:_titleView];
+
+        if (_boxType === CPBoxSeparator)
+            _titlePosition = CPNoTitle;
+
+        [_titleView setFont:[self titleFont]];
+        [_titleView setTextColor:[self titleColor]];
 
         [self _manageTitlePositioning];
+
+        [self refreshDisplay];
     }
 
     return self;
@@ -625,13 +907,47 @@ var CPBoxTypeKey          = @"CPBoxTypeKey",
 
 - (void)encodeWithCoder:(CPCoder)aCoder
 {
+    // We have to distinguish between 2 cases :
+    // - we come from nib2cib
+    // - we come from elsewhere
+    //
+    // When coming from nib2cib, we have no _boxView, _contentView, _titleView.
+    // We fix _contentView to be the first (and only) subview.
+    // They will have to be added on decoding.
+    //
+    // When coming from elsewhere, we remove _boxView (and thus _contentView) and _titleView
+    // from the view hierarchy as we'll already encode them via variables.
+    // They will be putted back during decoding. This way, we reduce the space and speed needed for coding.
+
+    var subviews = [self subviews];
+
+    if (!_boxView)
+    {
+        // We're coming from nib2cib.
+
+        _contentView = subviews[0];
+
+        [_contentView removeFromSuperview];
+    }
+    else
+    {
+        // We're coming from elsewhere.
+
+        [_boxView   removeFromSuperview];
+        [_titleView removeFromSuperview];
+    }
+
     [super encodeWithCoder:aCoder];
 
+    [self setSubviews:subviews];
+
     [aCoder encodeInt:_boxType forKey:CPBoxTypeKey];
     [aCoder encodeInt:_borderType forKey:CPBoxBorderTypeKey];
-    [aCoder encodeObject:_title forKey:CPBoxTitle];
-    [aCoder encodeInt:_titlePosition forKey:CPBoxTitlePosition];
-    [aCoder encodeObject:_titleView forKey:CPBoxTitleView];
+    [aCoder encodeObject:_title forKey:CPBoxTitleKey];
+    [aCoder encodeInt:_titlePosition forKey:CPBoxTitlePositionKey];
+    [aCoder encodeConditionalObject:_contentView forKey:CPBoxContentViewKey];
+    [aCoder encodeConditionalObject:_titleView forKey:CPBoxTitleViewKey];
+    [aCoder encodeConditionalObject:_boxView forKey:CPBoxBoxViewKey];
 }
 
 @end

AppKit/CPBrowser.j

@@ -20,6 +20,7 @@
  * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
  */
 
+@import <Foundation/CPObject.j>
 @import <Foundation/CPIndexSet.j>
 
 @import "CPControl.j"
@@ -30,40 +31,84 @@
 
 @global CPApp
 
+@protocol CPBrowserDelegate <CPObject>
+
+@optional
+- (BOOL)browser:(CPBrowser)browser acceptDrop:(id)info atRow:(CPInteger)row column:(CPInteger)column dropOperation:(CPTableViewDropOperation)dropOperation;
+- (BOOL)browser:(CPBrowser)browser canDragRowsWithIndexes:(CPIndexSet)rowIndexes inColumn:(CPInteger)column withEvent:(CPEvent )event;
+- (BOOL)browser:(CPBrowser)browser isLeafItem:(id)item;
+- (BOOL)browser:(CPBrowser)browser shouldSelectRowIndexes:(CPIndexSet)anIndexSet inColumn:(CPInteger)column;
+- (BOOL)browser:(CPBrowser)browser writeRowsWithIndexes:(CPIndexSet)rowIndexes inColumn:(CPInteger)column toPasteboard:(CPPasteboard)pasteboard;
+- (CPDragOperation)browser:(CPBrowser)browser validateDrop:(id)info proposedRow:(CPInteger)row column:(CPInteger)column dropOperation:(CPTableViewDropOperation)dropOperation;
+- (CPImage)browser:(CPBrowser)browser imageValueForItem:(id)anItem;
+- (CPImage)browser:(CPBrowser)browser draggingImageForRowsWithIndexes:(CPIndexSet)rowIndexes inColumn:(CPInteger)column withEvent:(CPEvent)event offset:(CGPoint)dragImageOffset;
+- (CPIndexSet)browser:(CPBrowser)browser selectionIndexesForProposedSelection:(CPIndexSet)proposedSelectionIndexes inColumn:(CPInteger)column;
+- (CPInteger)browser:(CPBrowser)browser numberOfChildrenOfItem:(id)item;
+- (CPView)browser:(CPBrowser)browser draggingViewForRowsWithIndexes:(CPIndexSet)rowIndexes inColumn:(CPInteger)column withEvent:(CPEvent)event offset:(CGPoint)dragImageOffset;
+- (id)browser:(CPBrowser)browser child:(CPInteger)index ofItem:(id)item;
+- (id)browser:(CPBrowser)browser objectValueForItem:(id)item;
+- (id)rootItemForBrowser:(CPBrowser)browser;
+- (void)browser:(CPBrowser)browser didChangeLastColumn:(CPInteger)oldLastColumn toColumn:(CPInteger)column;
+- (void)browser:(CPBrowser)browser didResizeColumn:(CPInteger)column;
+- (void)browserSelectionIsChanging:(CPBrowser)browser;
+- (void)browserSelectionDidChange:(CPBrowser)browser;
+
+@end
+
+var CPBrowserDelegate_browser_acceptDrop_atRow_column_dropOperation_                        = 1 << 1,
+    CPBrowserDelegate_browser_canDragRowsWithIndexes_inColumn_withEvent_                    = 1 << 2,
+    CPBrowserDelegate_browser_isLeafItem_                                                   = 1 << 3,
+    CPBrowserDelegate_browser_shouldSelectRowIndexes_inColumn_                              = 1 << 4,
+    CPBrowserDelegate_browser_writeRowsWithIndexes_inColumn_toPasteboard_                   = 1 << 5,
+    CPBrowserDelegate_browser_validateDrop_proposedRow_column_dropOperation_                = 1 << 6,
+    CPBrowserDelegate_browser_draggingImageForRowsWithIndexes_inColumn_withEvent_offset_    = 1 << 7,
+    CPBrowserDelegate_browser_imageValueForItem_                                            = 1 << 8,
+    CPBrowserDelegate_browser_selectionIndexesForProposedSelection_inColumn_                = 1 << 9,
+    CPBrowserDelegate_browser_numberOfChildrenOfItem_                                       = 1 << 10,
+    CPBrowserDelegate_browser_draggingViewForRowsWithIndexes_inColumn_withEvent_offset_     = 1 << 11,
+    CPBrowserDelegate_browser_child_ofItem_                                                 = 1 << 12,
+    CPBrowserDelegate_browser_objectValueForItem_                                           = 1 << 13,
+    CPBrowserDelegate_rootItemForBrowser_                                                   = 1 << 14,
+    CPBrowserDelegate_browser_didChangeLastColumn_toColumn_                                 = 1 << 15,
+    CPBrowserDelegate_browser_didResizeColumn_                                              = 1 << 16,
+    CPBrowserDelegate_browserSelectionIsChanging_                                           = 1 << 17,
+    CPBrowserDelegate_browserSelectionDidChange_                                            = 1 << 18;
+
 /*!
     @ingroup appkit
     @class CPBrowser
 */
 @implementation CPBrowser : CPControl
 {
-    id              _delegate;
-    CPString        _pathSeparator;
+    id <CPBrowserDelegate>  _delegate;
+    CPString                _pathSeparator;
+    unsigned                _implementedDelegateMethods;
 
-    CPView          _contentView;
-    CPScrollView    _horizontalScrollView;
-    CPView          _prototypeView;
+    CPView                  _contentView;
+    CPScrollView            _horizontalScrollView;
+    CPView                  _prototypeView;
 
-    CPArray         _tableViews;
-    CPArray         _tableDelegates;
+    CPArray                 _tableViews;
+    CPArray                 _tableDelegates;
 
-    id              _rootItem;
+    id                      _rootItem;
 
-    BOOL            _delegateSupportsImages;
+    BOOL                    _delegateSupportsImages;
 
-    SEL             _doubleAction @accessors(property=doubleAction);
+    SEL                     _doubleAction @accessors(property=doubleAction);
 
-    BOOL            _allowsMultipleSelection;
-    BOOL            _allowsEmptySelection;
+    BOOL                    _allowsMultipleSelection;
+    BOOL                    _allowsEmptySelection;
 
-    Class           _tableViewClass @accessors(property=tableViewClass);
+    Class                   _tableViewClass @accessors(property=tableViewClass);
 
-    float           _rowHeight;
-    float           _imageWidth;
-    float           _leafWidth;
-    float           _minColumnWidth;
-    float           _defaultColumnWidth @accessors(property=defaultColumnWidth);
+    float                   _rowHeight;
+    float                   _imageWidth;
+    float                   _leafWidth;
+    float                   _minColumnWidth;
+    float                   _defaultColumnWidth @accessors(property=defaultColumnWidth);
 
-    CPArray         _columnWidths;
+    CPArray                 _columnWidths;
 }
 
 + (CPString)defaultThemeClass
@@ -137,10 +182,71 @@
             [CPKeyedArchiver archivedDataWithRootObject:_prototypeView]];
 }
 
-- (void)setDelegate:(id)anObject
+- (void)setDelegate:(id <CPBrowserDelegate>)anObject
 {
+    if (_delegate === anObject)
+        return;
+
     _delegate = anObject;
-    _delegateSupportsImages = [_delegate respondsToSelector:@selector(browser:imageValueForItem:)];
+    _implementedDelegateMethods = 0;
+    _delegateSupportsImages = NO;
+
+    if ([_delegate respondsToSelector:@selector(browser:acceptDrop:atRow:column:dropOperation:)])
+        _implementedDelegateMethods |= CPBrowserDelegate_browser_acceptDrop_atRow_column_dropOperation_;
+
+    if ([_delegate respondsToSelector:@selector(browser:canDragRowsWithIndexes:inColumn:withEvent:)])
+        _implementedDelegateMethods |= CPBrowserDelegate_browser_canDragRowsWithIndexes_inColumn_withEvent_;
+
+    if ([_delegate respondsToSelector:@selector(browser:isLeafItem:)])
+        _implementedDelegateMethods |= CPBrowserDelegate_browser_isLeafItem_;
+
+    if ([_delegate respondsToSelector:@selector(browser:shouldSelectRowIndexes:inColumn:)])
+        _implementedDelegateMethods |= CPBrowserDelegate_browser_shouldSelectRowIndexes_inColumn_;
+
+    if ([_delegate respondsToSelector:@selector(browser:writeRowsWithIndexes:inColumn:toPasteboard:)])
+        _implementedDelegateMethods |= CPBrowserDelegate_browser_writeRowsWithIndexes_inColumn_toPasteboard_;
+
+    if ([_delegate respondsToSelector:@selector(browser:validateDrop:proposedRow:column:dropOperation:)])
+        _implementedDelegateMethods |= CPBrowserDelegate_browser_validateDrop_proposedRow_column_dropOperation_;
+
+    if ([_delegate respondsToSelector:@selector(browser:draggingImageForRowsWithIndexes:inColumn:withEvent:offset:)])
+        _implementedDelegateMethods |= CPBrowserDelegate_browser_draggingImageForRowsWithIndexes_inColumn_withEvent_offset_;
+
+    if ([_delegate respondsToSelector:@selector(browser:imageValueForItem:)])
+    {
+        _delegateSupportsImages = YES;
+        _implementedDelegateMethods |= CPBrowserDelegate_browser_imageValueForItem_;
+    }
+
+    if ([_delegate respondsToSelector:@selector(browser:selectionIndexesForProposedSelection:inColumn:)])
+        _implementedDelegateMethods |= CPBrowserDelegate_browser_selectionIndexesForProposedSelection_inColumn_;
+
+    if ([_delegate respondsToSelector:@selector(browser:numberOfChildrenOfItem:)])
+        _implementedDelegateMethods |= CPBrowserDelegate_browser_numberOfChildrenOfItem_;
+
+    if ([_delegate respondsToSelector:@selector(browser:draggingViewForRowsWithIndexes:inColumn:withEvent:offset:)])
+        _implementedDelegateMethods |= CPBrowserDelegate_browser_draggingViewForRowsWithIndexes_inColumn_withEvent_offset_;
+
+    if ([_delegate respondsToSelector:@selector(browser:child:ofItem:)])
+        _implementedDelegateMethods |= CPBrowserDelegate_browser_child_ofItem_;
+
+    if ([_delegate respondsToSelector:@selector(browser:objectValueForItem:)])
+        _implementedDelegateMethods |= CPBrowserDelegate_browser_objectValueForItem_;
+
+    if ([_delegate respondsToSelector:@selector(rootItemForBrowser:)])
+        _implementedDelegateMethods |= CPBrowserDelegate_rootItemForBrowser_;
+
+    if ([_delegate respondsToSelector:@selector(browser:didChangeLastColumn:toColumn:)])
+        _implementedDelegateMethods |= CPBrowserDelegate_browser_didChangeLastColumn_toColumn_;
+
+    if ([_delegate respondsToSelector:@selector(browser:didChangeLastColumn:)])
+        _implementedDelegateMethods |= CPBrowserDelegate_browser_didResizeColumn_;
+
+    if ([_delegate respondsToSelector:@selector(browserSelectionIsChanging:)])
+        _implementedDelegateMethods |= CPBrowserDelegate_browserSelectionIsChanging_;
+
+    if ([_delegate respondsToSelector:@selector(browserSelectionDidChange:)])
+        _implementedDelegateMethods |= CPBrowserDelegate_browserSelectionDidChange_;
 
     [self loadColumnZero];
 }
@@ -162,10 +268,7 @@
 
 - (void)loadColumnZero
 {
-    if ([_delegate respondsToSelector:@selector(rootItemForBrowser:)])
-        _rootItem = [_delegate rootItemForBrowser:self];
-    else
-        _rootItem = nil;
+    _rootItem = [self _sendDelegateRootItemForBrowser];
 
     [self setLastColumn:-1];
     [self addColumn];
@@ -190,8 +293,7 @@
     _tableViews = _tableViews.slice(0, indexPlusOne);
     _tableDelegates = _tableDelegates.slice(0, indexPlusOne);
 
-    if ([_delegate respondsToSelector:@selector(browser:didChangeLastColumn:toColumn:)])
-        [_delegate browser:self didChangeLastColumn:oldValue toColumn:columnIndex];
+    [self _sendDelegateBrowserDidChangeLastColumn:oldValue toColumn:columnIndex];
 
     [self tile];
 }
@@ -361,17 +463,17 @@
 
 - (id)itemAtRow:(CPInteger)row inColumn:(CPInteger)column
 {
-    return [_tableDelegates[column] childAtIndex:row];
+    return [_tableDelegates[column] childAtIndex:row] || nil;
 }
 
 - (BOOL)isLeafItem:(id)item
 {
-    return [_delegate respondsToSelector:@selector(browser:isLeafItem:)] && [_delegate browser:self isLeafItem:item];
+    return (_implementedDelegateMethods & CPBrowserDelegate_browser_isLeafItem_) && [_delegate browser:self isLeafItem:item];
 }
 
 - (id)parentForItemsInColumn:(CPInteger)column
 {
-    return [_tableDelegates[column] _item];
+    return [_tableDelegates[column] _item] || nil;
 }
 
 - (CPSet)selectedItems
@@ -493,9 +595,7 @@
 {
     _columnWidths[column] = aWidth;
 
-    if ([_delegate respondsToSelector:@selector(browser:didResizeColumn:)])
-        [_delegate browser:self didResizeColumn:column];
-
+    [self _sendDelegateBrowserDidResizeColumn:column];
     [self tile];
 }
 
@@ -610,15 +710,12 @@
     if (column < 0 || column > [self lastColumn] + 1)
         return;
 
-    if ([_delegate respondsToSelector:@selector(browser:selectionIndexesForProposedSelection:inColumn:)])
-        indexSet = [_delegate browser:self selectionIndexesForProposedSelection:indexSet inColumn:column];
+    indexSet = [self _sendDelegateBrowserSelectionIndexesForProposedSelection:indexSet inColumn:column];
 
-    if ([_delegate respondsToSelector:@selector(browser:shouldSelectRowIndexes:inColumn:)] &&
-       ![_delegate browser:self shouldSelectRowIndexes:indexSet inColumn:column])
+    if (![self _sendDelegateBrowserShouldSelectRowIndexes:indexSet inColumn:column])
         return;
 
-    if ([_delegate respondsToSelector:@selector(browserSelectionIsChanging:)])
-        [_delegate browserSelectionIsChanging:self];
+    [self _sendDelegateBrowserSelectionIsChanging];
 
     if (column > [self lastColumn])
         [self addColumn];
@@ -629,8 +726,7 @@
 
     [self scrollColumnToVisible:column];
 
-    if ([_delegate respondsToSelector:@selector(browserSelectionDidChange:)])
-        [_delegate browserSelectionDidChange:self];
+    [self _sendDelegateBrowserSelectionDidChange];
 }
 
 - (void)setBackgroundColor:(CPColor)aColor
@@ -652,30 +748,6 @@
     [_tableViews makeObjectsPerformSelector:@selector(registerForDraggedTypes:) withObject:types];
 }
 
-- (BOOL)canDragRowsWithIndexes:(CPIndexSet)rowIndexes inColumn:(CPInteger)columnIndex withEvent:(CPEvent)dragEvent
-{
-    if ([_delegate respondsToSelector:@selector(browser:canDragRowsWithIndexes:inColumn:withEvent:)])
-        return [_delegate browser:self canDragRowsWithIndexes:rowIndexes inColumn:columnIndex withEvent:dragEvent];
-
-    return YES;
-}
-
-- (CPImage)draggingImageForRowsWithIndexes:(CPIndexSet)rowIndexes inColumn:(CPInteger)columnIndex withEvent:(CPEvent)dragEvent offset:(CGPoint)dragImageOffset
-{
-    if ([_delegate respondsToSelector:@selector(browser:draggingImageForRowsWithIndexes:inColumn:withEvent:offset:)])
-        return [_delegate browser:self draggingImageForRowsWithIndexes:rowIndexes inColumn:columnIndex withEvent:dragEvent offset:dragImageOffset];
-
-    return nil;
-}
-
-- (CPView)draggingViewForRowsWithIndexes:(CPIndexSet)rowIndexes inColumn:(CPInteger)columnIndex withEvent:(CPEvent)dragEvent offset:(CGPoint)dragImageOffset
-{
-    if ([_delegate respondsToSelector:@selector(browser:draggingViewForRowsWithIndexes:inColumn:withEvent:offset:)])
-        return [_delegate browser:self draggingViewForRowsWithIndexes:rowIndexes inColumn:columnIndex withEvent:dragEvent offset:dragImageOffset];
-
-    return nil;
-}
-
 @end
 
 @implementation CPBrowser (CPCoding)
@@ -860,8 +932,6 @@
 
 @end
 
-@import <Foundation/CPObject.j>
-
 @implementation _CPBrowserTableDelegate : CPObject
 {
     CPBrowser   _browser @accessors;
@@ -909,7 +979,7 @@
 
 - (BOOL)tableView:(CPTableView)aTableView acceptDrop:(id)info row:(CPInteger)row dropOperation:(CPTableViewDropOperation)operation
 {
-    if ([_delegate respondsToSelector:@selector(browser:acceptDrop:atRow:column:dropOperation:)])
+    if (_browser._implementedDelegateMethods & CPBrowserDelegate_browser_acceptDrop_atRow_column_dropOperation_)
         return [_delegate browser:_browser acceptDrop:info atRow:row column:_index dropOperation:operation];
     else
         return NO;
@@ -917,7 +987,7 @@
 
 - (CPDragOperation)tableView:(CPTableView)aTableView validateDrop:(id)info proposedRow:(CPInteger)row proposedDropOperation:(CPTableViewDropOperation)operation
 {
-    if ([_delegate respondsToSelector:@selector(browser:validateDrop:proposedRow:column:dropOperation:)])
+    if (_browser._implementedDelegateMethods & CPBrowserDelegate_browser_validateDrop_proposedRow_column_dropOperation_)
         return [_delegate browser:_browser validateDrop:info proposedRow:row column:_index dropOperation:operation];
     else
         return CPDragOperationNone;
@@ -925,7 +995,7 @@
 
 - (BOOL)tableView:(CPTableView)aTableView writeRowsWithIndexes:(CPIndexSet)rowIndexes toPasteboard:(CPPasteboard)pboard
 {
-    if ([_delegate respondsToSelector:@selector(browser:writeRowsWithIndexes:inColumn:toPasteboard:)])
+    if (_browser._implementedDelegateMethods & CPBrowserDelegate_browser_writeRowsWithIndexes_inColumn_toPasteboard_)
         return [_delegate browser:_browser writeRowsWithIndexes:rowIndexes inColumn:_index toPasteboard:pboard];
     else
         return NO;
@@ -980,7 +1050,7 @@
     var imageView = [self layoutEphemeralSubviewNamed:@"image-view"
                                            positioned:CPWindowAbove
                       relativeToEphemeralSubviewNamed:nil],
-        isHighlighted = [self themeState] & CPThemeStateSelectedDataView;
+        isHighlighted = [self hasThemeState:CPThemeStateSelectedDataView];
 
     [imageView setImage: _isLeaf ? (isHighlighted ? _highlightedBranchImage : _branchImage) : nil];
     [imageView setImageScaling:CPImageScaleNone];
@@ -1008,3 +1078,115 @@
 }
 
 @end
+
+@implementation CPBrowser (CPBrowserDelegate)
+
+/*!
+    @ignore
+    Call delegate rootItemForBrowser:
+*/
+- (id)_sendDelegateRootItemForBrowser
+{
+    if (!(_implementedDelegateMethods & CPBrowserDelegate_rootItemForBrowser_))
+        return nil;
+
+    return [_delegate rootItemForBrowser:self];
+}
+
+/*!
+    @ignore
+    Call delegate browser:didChangeLastColumn:toColumn:
+*/
+- (void)_sendDelegateBrowserDidChangeLastColumn:(CPInteger)lastColumn toColumn:(CPInteger)newColumn
+{
+    if (!(_implementedDelegateMethods & CPBrowserDelegate_browser_didChangeLastColumn_toColumn_))
+        return;
+
+    [_delegate browser:self didChangeLastColumn:lastColumn toColumn:newColumn];
+}
+
+/*!
+    @ignore
+    Call delegate browser:didResizeColumn:
+*/
+- (void)_sendDelegateBrowserDidResizeColumn:(CPInteger)column
+{
+    if (!(_implementedDelegateMethods & CPBrowserDelegate_browser_didResizeColumn_))
+        return;
+
+    [_delegate browser:self didResizeColumn:column];
+}
+
+/*!
+    @ignore
+    Call delegate browserSelectionIsChanging:
+*/
+- (void)_sendDelegateBrowserSelectionIsChanging
+{
+    if (!(_implementedDelegateMethods & CPBrowserDelegate_browserSelectionIsChanging_))
+        return;
+
+    [_delegate browserSelectionIsChanging:self];
+}
+
+/*!
+    @ignore
+    Call delegate browser:shouldSelectRowIndexes:inColumn:
+*/
+- (BOOL)_sendDelegateBrowserShouldSelectRowIndexes:(CPIndexSet)anIndexSet inColumn:(CPInteger)aColumn
+{
+    if (!(_implementedDelegateMethods & CPBrowserDelegate_browser_shouldSelectRowIndexes_inColumn_))
+        return YES;
+
+    return [_delegate browser:self shouldSelectRowIndexes:anIndexSet inColumn:aColumn];
+}
+
+/*!
+    @ignore
+    Call delegate browser:selectionIndexesForProposedSelection:inColumn:
+*/
+- (CPIndexSet)_sendDelegateBrowserSelectionIndexesForProposedSelection:(CPIndexSet)anIndexSet inColumn:(CPInteger)aColumn
+{
+    if (!(_implementedDelegateMethods & CPBrowserDelegate_browser_selectionIndexesForProposedSelection_inColumn_))
+        return anIndexSet;
+
+    return [_delegate browser:self selectionIndexesForProposedSelection:anIndexSet inColumn:aColumn];
+}
+
+/*!
+    @ignore
+    Call delegate browserSelectionDidChange
+*/
+- (void)_sendDelegateBrowserSelectionDidChange
+{
+    if (!(_implementedDelegateMethods & CPBrowserDelegate_browserSelectionDidChange_))
+        return;
+
+    [_delegate browserSelectionDidChange:self];
+}
+
+- (BOOL)canDragRowsWithIndexes:(CPIndexSet)rowIndexes inColumn:(CPInteger)columnIndex withEvent:(CPEvent)dragEvent
+{
+    if (_implementedDelegateMethods & CPBrowserDelegate_browser_canDragRowsWithIndexes_inColumn_withEvent_)
+        return [_delegate browser:self canDragRowsWithIndexes:rowIndexes inColumn:columnIndex withEvent:dragEvent];
+
+    return YES;
+}
+
+- (CPImage)draggingImageForRowsWithIndexes:(CPIndexSet)rowIndexes inColumn:(CPInteger)columnIndex withEvent:(CPEvent)dragEvent offset:(CGPoint)dragImageOffset
+{
+    if (_implementedDelegateMethods & CPBrowserDelegate_browser_draggingImageForRowsWithIndexes_inColumn_withEvent_offset_)
+        return [_delegate browser:self draggingImageForRowsWithIndexes:rowIndexes inColumn:columnIndex withEvent:dragEvent offset:dragImageOffset];
+
+    return nil;
+}
+
+- (CPView)draggingViewForRowsWithIndexes:(CPIndexSet)rowIndexes inColumn:(CPInteger)columnIndex withEvent:(CPEvent)dragEvent offset:(CGPoint)dragImageOffset
+{
+    if (_implementedDelegateMethods & CPBrowserDelegate_browser_draggingViewForRowsWithIndexes_inColumn_withEvent_offset_)
+        return [_delegate browser:self draggingViewForRowsWithIndexes:rowIndexes inColumn:columnIndex withEvent:dragEvent offset:dragImageOffset];
+
+    return nil;
+}
+
+@end

AppKit/CPButton.j

@@ -29,8 +29,7 @@
 @import "CPWindow_Constants.j"
 
 /* @group CPBezelStyle */
-
-                                       // IB style
+@typedef CPBezelStyle
 CPRoundedBezelStyle             = 1;   // Push
 CPRegularSquareBezelStyle       = 2;   // Bevel
 CPThickSquareBezelStyle         = 3;
@@ -45,10 +44,12 @@ CPTexturedRoundedBezelStyle     = 11;  // Round Textured
 CPRoundRectBezelStyle           = 12;  // Round Rect
 CPRecessedBezelStyle            = 13;  // Recessed
 CPRoundedDisclosureBezelStyle   = 14;  // Disclosure
+CPInlineBezelStyle              = 15;  // Inline
 CPHUDBezelStyle                 = -1;
 
 
 /* @group CPButtonType */
+@typedef CPButtonType
 CPMomentaryLightButton  = 0;
 CPPushOnPushOffButton   = 1;
 CPToggleButton          = 2;
@@ -72,13 +73,32 @@ CPPushInCellMask            = CPPushInButtonMask;
 CPChangeGrayCellMask        = CPGrayButtonMask;
 CPChangeBackgroundCellMask  = CPBackgroundButtonMask;
 
-CPButtonStateMixed             = CPThemeState("mixed");
-CPButtonStateBezelStyleRounded = CPThemeState("rounded");
+CPButtonStateMixed                       = CPThemeState("mixed");
+CPButtonStateBezelStyleRounded           = CPThemeState("rounded");             // IB style : Push
+CPButtonStateBezelStyleShadowlessSquare  = CPThemeState("square");              // IB style : Square
+CPButtonStateBezelStyleSmallSquare       = CPThemeState("gradient");            // IB style : Gradient
+CPButtonStateBezelStyleTexturedRounded   = CPThemeState("textured-rounded");    // IB style : Textured rounded
+CPButtonStateBezelStyleRoundRect         = CPThemeState("roundRect");           // IB style : Round rect
+CPButtonStateBezelStyleRecessed          = CPThemeState("recessed");            // IB style : Recessed
+CPButtonStateBezelStyleInline            = CPThemeState("inline");              // IB style : Inline
+CPButtonStateBezelStyleRegularSquare     = CPThemeState("bevel");               // IB style : Bevel
+CPButtonStateBezelStyleTextured          = CPThemeState("textured");            // IB style : Textured
+CPButtonStateBezelStyleDisclosure        = CPThemeState("disclosure");          // IB style : Disclosure triangle
+CPButtonStateBezelStyleRoundedDisclosure = CPThemeState("rounded-disclosure");  // IB style : Rounded disclosure
 
 // add all future correspondance between bezel styles and theme state here.
 var CPButtonBezelStyleStateMap = @{
-        CPRoundedBezelStyle: CPButtonStateBezelStyleRounded,
-        CPRoundRectBezelStyle: [CPNull null],
+        CPRoundedBezelStyle:            CPButtonStateBezelStyleRounded,
+        CPShadowlessSquareBezelStyle:   CPButtonStateBezelStyleShadowlessSquare,
+        CPSmallSquareBezelStyle:        CPButtonStateBezelStyleSmallSquare,
+        CPTexturedRoundedBezelStyle:    CPButtonStateBezelStyleTexturedRounded,
+        CPRoundRectBezelStyle:          CPButtonStateBezelStyleRoundRect,
+        CPRecessedBezelStyle:           CPButtonStateBezelStyleRecessed,
+        CPInlineBezelStyle:             CPButtonStateBezelStyleInline,
+        CPRegularSquareBezelStyle:      CPButtonStateBezelStyleRegularSquare,
+        CPTexturedSquareBezelStyle:     CPButtonStateBezelStyleTextured,
+        CPDisclosureBezelStyle:         CPButtonStateBezelStyleDisclosure,
+        CPRoundedDisclosureBezelStyle:  CPButtonStateBezelStyleRoundedDisclosure
     };
 
 /// @cond IGNORE
@@ -107,7 +127,7 @@ CPButtonImageOffset   = 3.0;
 
     // NS-style Display Properties
     CPBezelStyle        _bezelStyle;
-    CPControlSize       _controlSize;
+    ThemeState          _bezelState;
 
     CPString            _keyEquivalent;
     unsigned            _keyEquivalentModifierMask;
@@ -117,7 +137,7 @@ CPButtonImageOffset   = 3.0;
     float               _periodicDelay;
     float               _periodicInterval;
 
-    BOOL                _isTracking;
+    BOOL                _isHighlighted;
 }
 
 + (Class)_binderClassForBinding:(CPString)aBinding
@@ -154,9 +174,17 @@ CPButtonImageOffset   = 3.0;
     return @{
             @"image": [CPNull null],
             @"image-offset": 0.0,
+            @"image-vertical-offset": 0.0,
             @"bezel-inset": CGInsetMakeZero(),
             @"content-inset": CGInsetMakeZero(),
             @"bezel-color": [CPNull null],
+            @"image-position": CPImageLeft,
+            @"vertical-alignment": CPCenterVerticalTextAlignment,
+            @"alignment": CPCenterTextAlignment,
+            @"image-scaling": CPImageScaleNone,
+            @"invert-image": NO,
+            @"invert-image-on-push": NO,
+            @"image-color": [CPNull null] // If null, image color follows text color
         };
 }
 
@@ -171,12 +199,6 @@ CPButtonImageOffset   = 3.0;
 
     if (self)
     {
-        // Should we instead override the defaults?
-        [self setValue:CPCenterTextAlignment forThemeAttribute:@"alignment"];
-        [self setValue:CPCenterVerticalTextAlignment forThemeAttribute:@"vertical-alignment"];
-        [self setValue:CPImageLeft forThemeAttribute:@"image-position"];
-        [self setValue:CPImageScaleNone forThemeAttribute:@"image-scaling"];
-
         [self setBezelStyle:CPRoundRectBezelStyle];
         [self setBordered:YES];
 
@@ -188,8 +210,6 @@ CPButtonImageOffset   = 3.0;
 
 - (void)_init
 {
-    _controlSize = CPRegularControlSize;
-
     _keyEquivalent = @"";
     _keyEquivalentModifierMask = 0;
 
@@ -200,6 +220,20 @@ CPButtonImageOffset   = 3.0;
     [self setButtonType:CPMomentaryPushInButton];
 }
 
+// MARK: -
+// MARK: Control Size
+
+- (void)setControlSize:(CPControlSize)aControlSize
+{
+    [super setControlSize:aControlSize];
+
+    if ([self isBordered])
+        [self _sizeToControlSize];
+}
+
+
+// MARK: -
+
 // Setting the state
 /*!
     Returns a Boolean value indicating whether the button allows a mixed state.
@@ -246,30 +280,6 @@ CPButtonImageOffset   = 3.0;
             anObjectValue = CPOnState;
 
     [super setObjectValue:anObjectValue];
-
-    switch ([self objectValue])
-    {
-        case CPMixedState:
-            [self unsetThemeState:CPThemeStateSelected];
-            [self setThemeState:CPButtonStateMixed];
-            if (_showsStateBy & (CPChangeGrayCellMask | CPChangeBackgroundCellMask))
-                [self setThemeState:CPThemeStateHighlighted];
-            else
-                [self unsetThemeState:CPThemeStateHighlighted];
-            break;
-
-        case CPOnState:
-            [self unsetThemeState:CPButtonStateMixed];
-            [self setThemeState:CPThemeStateSelected];
-            if (_showsStateBy & (CPChangeGrayCellMask | CPChangeBackgroundCellMask))
-                [self setThemeState:CPThemeStateHighlighted];
-            else
-                [self unsetThemeState:CPThemeStateHighlighted];
-            break;
-
-        case CPOffState:
-            [self unsetThemeState:CPThemeStateSelected | CPButtonStateMixed | CPThemeStateHighlighted];
-    }
 }
 
 /*!
@@ -366,12 +376,21 @@ CPButtonImageOffset   = 3.0;
 
 - (void)setImage:(CPImage)anImage
 {
-    [self setValue:anImage forThemeAttribute:@"image"];
+    // This is needed when compiling themes
+    if (!_bezelState)
+        _bezelState = CPThemeStateNormal;
+
+    [self setValue:anImage forThemeAttribute:@"image" inState:_bezelState];
+    // if we omit this, images will disappear as soon as the button becomes disabled
+    [self setValue:anImage forThemeAttribute:@"image" inState:_bezelState.and(CPThemeStateDisabled)];
 }
 
 - (CPImage)image
 {
-    return [self valueForThemeAttribute:@"image" inState:CPThemeStateNormal];
+    if (!_bezelState)
+        _bezelState = CPThemeStateNormal;
+
+    return [self valueForThemeAttribute:@"image" inState:_bezelState];
 }
 
 /*!
@@ -380,7 +399,8 @@ CPButtonImageOffset   = 3.0;
 */
 - (void)setAlternateImage:(CPImage)anImage
 {
-    [self setValue:anImage forThemeAttribute:@"image" inState:CPThemeStateHighlighted];
+    [self setValue:anImage forThemeAttribute:@"image" inState:_bezelState.and(CPThemeStateHighlighted)];
+    [self setValue:anImage forThemeAttribute:@"image" inState:_bezelState.and(CPThemeStateSelected)];
 }
 
 /*!
@@ -388,7 +408,17 @@ CPButtonImageOffset   = 3.0;
 */
 - (CPImage)alternateImage
 {
-    return [self valueForThemeAttribute:@"image" inState:CPThemeStateHighlighted];
+    return [self valueForThemeAttribute:@"image" inState:_bezelState.and(CPThemeStateSelected)];
+}
+
+- (void)setHoveredImage:(CPImage)anImage
+{
+    [self setValue:anImage forThemeAttribute:@"image" inState:_bezelState.and(CPThemeStateHovered)];
+}
+
+- (CPImage)hoveredImage
+{
+    return [self valueForThemeAttribute:@"image" inState:_bezelState.and(CPThemeStateHovered)];
 }
 
 - (void)setImageOffset:(float)theImageOffset
@@ -411,11 +441,6 @@ CPButtonImageOffset   = 3.0;
 
     _showsStateBy = aMask;
 
-    if (_showsStateBy & (CPChangeGrayCellMask | CPChangeBackgroundCellMask) && [self state] != CPOffState)
-        [self setThemeState:CPThemeStateHighlighted];
-    else
-        [self unsetThemeState:CPThemeStateHighlighted];
-
     [self setNeedsDisplay:YES];
     [self setNeedsLayout];
 }
@@ -432,11 +457,8 @@ CPButtonImageOffset   = 3.0;
 
     _highlightsBy = aMask;
 
-    if ([self hasThemeState:CPThemeStateHighlighted])
-    {
-        [self setNeedsDisplay:YES];
-        [self setNeedsLayout];
-    }
+    [self setNeedsDisplay:YES];
+    [self setNeedsLayout];
 }
 
 - (CPInteger)highlightsBy
@@ -521,9 +543,20 @@ CPButtonImageOffset   = 3.0;
     _periodicInterval   = anInterval;
 }
 
+- (void)highlight:(BOOL)shouldHighlight
+{
+    if (_isHighlighted == shouldHighlight)
+        return;
+
+    _isHighlighted = shouldHighlight;
+
+    [self setNeedsLayout];
+    [self setNeedsDisplay:YES];
+}
+
 - (void)mouseDown:(CPEvent)anEvent
 {
-    if ([self isContinuous])
+    if ([self isEnabled] && [self isContinuous])
     {
         _continuousDelayTimer = [CPTimer scheduledTimerWithTimeInterval:_periodicDelay callback: function()
         {
@@ -543,46 +576,12 @@ CPButtonImageOffset   = 3.0;
         [_target performSelector:_action withObject:self];
 }
 
-- (BOOL)startTrackingAt:(CGPoint)aPoint
-{
-    _isTracking = YES;
-
-    var startedTracking = [super startTrackingAt:aPoint];
-
-    if (_highlightsBy & (CPPushInCellMask | CPChangeGrayCellMask))
-    {
-        if (_showsStateBy & (CPChangeGrayCellMask | CPChangeBackgroundCellMask))
-            [self highlight:[self state] == CPOffState];
-        else
-            [self highlight:YES];
-    }
-    else
-    {
-        if (_showsStateBy & (CPChangeGrayCellMask | CPChangeBackgroundCellMask))
-            [self highlight:[self state] != CPOffState];
-        else
-            [self highlight:NO];
-    }
-
-    return startedTracking;
-}
-
 - (void)stopTracking:(CGPoint)lastPoint at:(CGPoint)aPoint mouseIsUp:(BOOL)mouseIsUp
 {
-    _isTracking = NO;
-
     if (mouseIsUp && CGRectContainsPoint([self bounds], aPoint))
         [self setNextState];
-    else
-    {
-        if (_showsStateBy & (CPChangeGrayCellMask | CPChangeBackgroundCellMask))
-            [self highlight:[self state] != CPOffState];
-        else
-            [self highlight:NO];
-    }
 
-    [self setNeedsLayout];
-    [self setNeedsDisplay:YES];
+    [self highlight:NO];
     [self invalidateTimers];
 }
 
@@ -603,7 +602,7 @@ CPButtonImageOffset   = 3.0;
 
 - (CGRect)contentRectForBounds:(CGRect)bounds
 {
-    var contentInset = [self currentValueForThemeAttribute:@"content-inset"];
+    var contentInset = [self valueForThemeAttribute:@"content-inset" inState:[self _contentVisualState]];
 
     return CGRectInsetByInset(bounds, contentInset);
 }
@@ -630,7 +629,7 @@ CPButtonImageOffset   = 3.0;
         size = [contentView frameSize];
     }
     else
-        size = [([self title] || " ") sizeWithFont:[self currentValueForThemeAttribute:@"font"]];
+        size = [([self title] || " ") sizeWithFont:[self font]];
 
     var contentInset = [self currentValueForThemeAttribute:@"content-inset"],
         minSize = [self currentValueForThemeAttribute:@"min-size"],
@@ -686,86 +685,164 @@ CPButtonImageOffset   = 3.0;
         return [[_CPImageAndTextView alloc] initWithFrame:CGRectMakeZero()];
 }
 
+- (CPThemeState)_backgroundVisualState
+{
+    var visualState  = [self themeState] || CPThemeStateNormal, // Needed during theme compilation
+        currentState = [self state],
+        buttonIsOn   = (currentState !== CPOffState);
+
+    if (_isHighlighted && (_highlightsBy & (CPPushInCellMask | CPChangeGrayCellMask)))
+        visualState = visualState.and(CPThemeStateHighlighted);
+    else
+        visualState = visualState.without(CPThemeStateHighlighted);
+
+    if (buttonIsOn && (_showsStateBy & (CPPushInCellMask | CPChangeGrayCellMask)))
+        visualState = visualState.and((currentState === CPOnState) ? CPThemeStateSelected : CPButtonStateMixed);
+    else
+        visualState = visualState.without(CPThemeStateSelected);
+
+    return visualState;
+}
+
+// Note : We have to split content and image visual states as, for example, radio buttons don't follow push buttons behavior
+- (CPThemeState)_contentVisualState
+{
+    var visualState  = [self themeState] || CPThemeStateNormal, // Needed during theme compilation
+        currentState = [self state],
+        buttonIsOn   = (currentState !== CPOffState);
+
+    // If the button is pushed (_isHighlighted), always add the highlighted state
+    if (_isHighlighted || (((_showsStateBy & CPChangeGrayCellMask) || (_showsStateBy & CPChangeBackgroundCellMask)) && buttonIsOn))
+        visualState = visualState.and(CPThemeStateHighlighted);
+    else
+        visualState = visualState.without(CPThemeStateHighlighted);
+
+    if (buttonIsOn && (_showsStateBy & CPContentsCellMask))
+        visualState = visualState.and((currentState === CPOnState) ? CPThemeStateSelected : CPButtonStateMixed);
+    else
+        visualState = visualState.without(CPThemeStateSelected);
+
+    return visualState;
+}
+
+- (CPThemeState)_imageVisualState
+{
+    var visualState  = [self themeState] || CPThemeStateNormal, // Needed during theme compilation
+        currentState = [self state],
+        buttonIsOn   = (currentState !== CPOffState);
+
+    // Remove highlighted & selected theme states
+    visualState = visualState.without(CPThemeStateHighlighted);
+    visualState = visualState.without(CPThemeStateSelected);
+
+    // Note : We have to deal with special case where button is ON, highlightsBy and showsStateBy use content, and button is pushed
+    //        BUT this should not be used for disclosure buttons !
+    if (_isHighlighted && buttonIsOn && (_highlightsBy & CPContentsCellMask) && (_showsStateBy & CPContentsCellMask) && (_bezelStyle !== CPDisclosureBezelStyle))
+        return visualState;
+
+    if (_isHighlighted && ((_highlightsBy & CPContentsCellMask) || (_highlightsBy & CPChangeGrayCellMask)))
+        visualState = visualState.and(CPThemeStateHighlighted);
+
+    if (buttonIsOn && (_showsStateBy & CPContentsCellMask))
+        visualState = visualState.and((currentState === CPOnState) ? CPThemeStateSelected : CPButtonStateMixed);
+
+    return visualState;
+}
+
+- (CPString)_currentTitle
+{
+    var buttonIsOn = ([self state] !== CPOffState);
+
+    // Note : We have to deal with special case where button is ON, highlightsBy and showsStateBy use content, and button is pushed
+    if (_isHighlighted && buttonIsOn && (_highlightsBy & CPContentsCellMask) && (_showsStateBy & CPContentsCellMask))
+        return _title;
+
+    else if (_alternateTitle && ((_isHighlighted && (_highlightsBy & CPContentsCellMask)) || (buttonIsOn && (_showsStateBy & CPContentsCellMask))))
+        return _alternateTitle;
+
+    else
+        return _title;
+}
+
+- (CPImage)_currentImage
+{
+    var visualState  = [self _imageVisualState],
+        currentImage = [self valueForThemeAttribute:@"image"       inState:visualState],
+        imageColor   = [self valueForThemeAttribute:@"image-color" inState:visualState],
+        buttonIsOn   = ([self state] !== CPOffState);
+
+    if ([currentImage isMaterialIconImage])
+    {
+        if (([self valueForThemeAttribute:@"invert-image" inState:visualState] || ([self valueForThemeAttribute:@"invert-image-on-push" inState:visualState] && (_isHighlighted || (((_showsStateBy & CPChangeGrayCellMask) || (_showsStateBy & CPChangeBackgroundCellMask)) && buttonIsOn)))))
+            currentImage = [currentImage invertedImage];
+
+        else if (imageColor && [imageColor isKindOfClass:CPColor])
+            // In some buttons, image color doesn't follow text color !
+            currentImage = [currentImage imageVersionWithColor:imageColor];
+
+        else
+            // By default, image color follows text color
+            currentImage = [currentImage imageVersionWithColor:[self valueForThemeAttribute:@"text-color" inState:[self _contentVisualState]]];
+    }
+
+    return currentImage;
+}
+
 - (void)layoutSubviews
 {
-    var bezelView = [self layoutEphemeralSubviewNamed:@"bezel-view"
-                                           positioned:CPWindowBelow
-                      relativeToEphemeralSubviewNamed:@"content-view"];
+    var bezelView   = [self layoutEphemeralSubviewNamed:@"bezel-view"
+                                             positioned:CPWindowBelow
+                        relativeToEphemeralSubviewNamed:@"content-view"],
 
-    [bezelView setBackgroundColor:[self currentValueForThemeAttribute:@"bezel-color"]];
-
-    var contentView = [self layoutEphemeralSubviewNamed:@"content-view"
+        contentView = [self layoutEphemeralSubviewNamed:@"content-view"
                                              positioned:CPWindowAbove
-                        relativeToEphemeralSubviewNamed:@"bezel-view"];
+                        relativeToEphemeralSubviewNamed:@"bezel-view"],
 
-    if (contentView)
-    {
-        var title = nil,
-            image = nil;
+        image              = [self _currentImage],
+        contentVisualState = [self _contentVisualState];
 
-        if (_isTracking)
-        {
-            if (_highlightsBy & CPContentsCellMask)
-            {
-                if (_showsStateBy & CPContentsCellMask)
-                {
-                    title = ([self state] == CPOffState && _alternateTitle) ? _alternateTitle : _title;
-                    image = ([self state] == CPOffState && [self alternateImage]) ? [self alternateImage] : [self image];
-                }
-                else
-                {
-                    title = [self alternateTitle];
-                    image = [self alternateImage];
-                }
-            }
-            else if (_showsStateBy & CPContentsCellMask)
-            {
-                title = ([self state] != CPOffState && _alternateTitle) ? _alternateTitle : _title;
-                image = ([self state] != CPOffState && [self alternateImage]) ? [self alternateImage] : [self image];
-            }
-            else
-            {
-                title = _title;
-                image = [self image];
-            }
-        }
-        else
-        {
-            if (_showsStateBy & CPContentsCellMask)
-            {
-                title = ([self state] != CPOffState && _alternateTitle) ? _alternateTitle : _title;
-                image = ([self state] != CPOffState && [self alternateImage]) ? [self alternateImage] : [self image];
-            }
-            else
-            {
-                title = _title;
-                image = [self image];
-            }
-        }
+    [bezelView   setBackgroundColor:[self valueForThemeAttribute:@"bezel-color" inState:[self _backgroundVisualState]]];
+    [contentView setText:[self _currentTitle]];
+    [contentView setImage:image];
 
-        [contentView setText:title];
-        [contentView setImage:image];
-        [contentView setImageOffset:[self currentValueForThemeAttribute:@"image-offset"]];
+    [contentView setImageOffset:[self valueForThemeAttribute:@"image-offset" inState:contentVisualState]];
+    [contentView setImageVerticalOffset:[self valueForThemeAttribute:@"image-vertical-offset" inState:contentVisualState]];
 
-        [contentView setFont:[self currentValueForThemeAttribute:@"font"]];
-        [contentView setTextColor:[self currentValueForThemeAttribute:@"text-color"]];
-        [contentView setAlignment:[self currentValueForThemeAttribute:@"alignment"]];
-        [contentView setVerticalAlignment:[self currentValueForThemeAttribute:@"vertical-alignment"]];
-        [contentView setLineBreakMode:[self currentValueForThemeAttribute:@"line-break-mode"]];
-        [contentView setTextShadowColor:[self currentValueForThemeAttribute:@"text-shadow-color"]];
-        [contentView setTextShadowOffset:[self currentValueForThemeAttribute:@"text-shadow-offset"]];
-        [contentView setImagePosition:[self currentValueForThemeAttribute:@"image-position"]];
-        [contentView setImageScaling:[self currentValueForThemeAttribute:@"image-scaling"]];
-        [contentView setDimsImage:[self hasThemeState:CPThemeStateDisabled] && _imageDimsWhenDisabled];
-    }
+    [contentView setFont:[self font]];
+    [contentView setTextColor:[self valueForThemeAttribute:@"text-color" inState:contentVisualState]];
+    [contentView setAlignment:[self valueForThemeAttribute:@"alignment"  inState:contentVisualState]];
+    [contentView setVerticalAlignment:[self valueForThemeAttribute:@"vertical-alignment" inState:contentVisualState]];
+    [contentView setLineBreakMode:[self valueForThemeAttribute:@"line-break-mode" inState:contentVisualState]];
+    [contentView _setUsesSingleLineMode:YES];
+    [contentView setTextShadowColor:[self valueForThemeAttribute:@"text-shadow-color" inState:contentVisualState]];
+    [contentView setTextShadowOffset:[self valueForThemeAttribute:@"text-shadow-offset" inState:contentVisualState]];
+    [contentView setImagePosition:[self valueForThemeAttribute:@"image-position"]];
+    [contentView setImageScaling:[self valueForThemeAttribute:@"image-scaling"]];
+
+    // We don't automatically dim material icon images as the color is driven by the theme
+    [contentView setDimsImage:[self hasThemeState:CPThemeStateDisabled] && _imageDimsWhenDisabled && ![image isMaterialIconImage]];
 }
 
 - (void)setBordered:(BOOL)shouldBeBordered
 {
     if (shouldBeBordered)
+    {
         [self setThemeState:CPThemeStateBordered];
+
+        if (_bezelState)
+            _bezelState = _bezelState.and(CPThemeStateBordered);
+        else
+            _bezelState = CPThemeStateBordered;
+    }
     else
+    {
         [self unsetThemeState:CPThemeStateBordered];
+
+        if (_bezelState)
+            _bezelState = _bezelState.without(CPThemeStateBordered);
+        else
+            _bezelState = CPThemeStateNormal;
+    }
 }
 
 - (BOOL)isBordered
@@ -795,7 +872,7 @@ CPButtonImageOffset   = 3.0;
 {
     var selfWindow = [self window];
 
-    if (selfWindow === aWindow || aWindow === nil)
+    if (selfWindow === aWindow || aWindow == nil)
         return;
 
     if ([selfWindow defaultButton] === self)
@@ -861,17 +938,7 @@ CPButtonImageOffset   = 3.0;
 
     [self setState:[self nextState]];
 
-    var shouldHighlight = NO;
-
-    if (_highlightsBy & (CPPushInCellMask | CPChangeGrayCellMask))
-    {
-        if (_showsStateBy & (CPChangeGrayCellMask | CPChangeBackgroundCellMask))
-            shouldHighlight = [self state] == CPOffState;
-        else
-            shouldHighlight = YES;
-    }
-
-    [self highlight:shouldHighlight];
+    [self highlight:YES];
 
     try
     {
@@ -883,8 +950,7 @@ CPButtonImageOffset   = 3.0;
     }
     finally
     {
-        if (shouldHighlight)
-            [CPTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(unhighlightButtonTimerDidFinish:) userInfo:nil repeats:NO];
+        [CPTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(unhighlightButtonTimerDidFinish:) userInfo:nil repeats:NO];
     }
 }
 
@@ -907,6 +973,22 @@ CPButtonImageOffset   = 3.0;
         [self setThemeState:newState];
 
     _bezelStyle = aBezelStyle;
+
+    if (_bezelState && newState)
+    {
+        if (currentState)
+            _bezelState =_bezelState.without(currentState);
+        _bezelState = _bezelState.and(newState);
+    }
+    else
+        _bezelState = newState || CPThemeStateNormal;
+
+    // For disclosure triangle and rounded, we have to move away from
+    // what Xcode tells us as we implement visual behavior with images (so content)
+    // and not background
+
+    if ((_bezelStyle === CPDisclosureBezelStyle) || (_bezelStyle === CPRoundedDisclosureBezelStyle))
+        [self setShowsStateBy:CPContentsCellMask];
 }
 
 - (unsigned)bezelStyle
@@ -930,7 +1012,8 @@ var CPButtonImageKey                    = @"CPButtonImageKey",
     CPButtonPeriodicDelayKey            = @"CPButtonPeriodicDelayKey",
     CPButtonPeriodicIntervalKey         = @"CPButtonPeriodicIntervalKey",
     CPButtonHighlightsByKey             = @"CPButtonHighlightsByKey",
-    CPButtonShowsStateByKey             = @"CPButtonShowsStateByKey";
+    CPButtonShowsStateByKey             = @"CPButtonShowsStateByKey",
+    CPButtonBezelStyleKey               = @"CPButtonBezelStyleKey";
 
 @implementation CPButton (CPCoding)
 
@@ -979,6 +1062,12 @@ var CPButtonImageKey                    = @"CPButtonImageKey",
 
         _keyEquivalentModifierMask = [aCoder decodeIntForKey:CPButtonKeyEquivalentMaskKey];
 
+        if ([aCoder containsValueForKey:CPButtonIsBorderedKey])
+            [self setBordered:[aCoder decodeBoolForKey:CPButtonIsBorderedKey]];
+
+        if ([aCoder containsValueForKey:CPButtonBezelStyleKey])
+            [self setBezelStyle:[aCoder decodeIntForKey:CPButtonBezelStyleKey]];
+
         [self setNeedsLayout];
         [self setNeedsDisplay:YES];
     }
@@ -1013,6 +1102,9 @@ var CPButtonImageKey                    = @"CPButtonImageKey",
 
     [aCoder encodeObject:_periodicDelay forKey:CPButtonPeriodicDelayKey];
     [aCoder encodeObject:_periodicInterval forKey:CPButtonPeriodicIntervalKey];
+
+    [aCoder encodeBool:[self isBordered] forKey:CPButtonIsBorderedKey];
+    [aCoder encodeInt: [self bezelStyle] forKey:CPButtonBezelStyleKey];
 }
 
 @end

AppKit/CPButtonBar.j

@@ -26,13 +26,17 @@
 @class CPSplitView
 
 @global CPPopUpButtonStatePullsDown
-
+@global CPKeyValueChangeOldKey
+@global CPKeyValueChangeNewKey
+@global CPKeyValueObservingOptionNew
+@global CPKeyValueObservingOptionOld
 
 @implementation CPButtonBar : CPView
 {
     BOOL    _hasResizeControl;
     BOOL    _resizeControlIsLeftAligned;
     CPArray _buttons;
+    CPArray _rightButtons;
 }
 
 + (id)plusButton
@@ -67,7 +71,7 @@
     [button addItemWithTitle:nil];
     [[button lastItem] setImage:image];
     [button setImagePosition:CPImageOnly];
-    [button setValue:CGInsetMake(0, 0, 0, 0) forThemeAttribute:"content-inset"];
+    [button setValue:CGInsetMake(0, 0, 0, 0) forThemeAttribute:"content-inset" inState:CPPopUpButtonStatePullsDown];
 
     [button setPullsDown:YES];
 
@@ -101,6 +105,7 @@
     if (self)
     {
         _buttons = [];
+        _rightButtons = [];
         [self setNeedsLayout];
     }
 
@@ -109,6 +114,8 @@
 
 - (void)awakeFromCib
 {
+    [super awakeFromCib];
+
     var view = [self superview],
         subview = self;
 
@@ -129,10 +136,20 @@
 
 - (void)setButtons:(CPArray)buttons
 {
+    for (var i = [_buttons count] - 1; i >= 0; i--)
+    {
+        [_buttons[i] removeFromSuperview];
+        [_buttons[i] removeObserver:self forKeyPath:@"hidden"];
+    }
+
+
     _buttons = [CPArray arrayWithArray:buttons];
 
-    for (var i = 0, count = [_buttons count]; i < count; i++)
+    for (var i = [_buttons count] - 1; i >= 0; i--)
+    {
+        [_buttons[i] addObserver:self forKeyPath:@"hidden" options:CPKeyValueObservingOptionNew | CPKeyValueObservingOptionOld context:nil];
         [_buttons[i] setBordered:YES];
+    }
 
     [self setNeedsLayout];
 }
@@ -142,6 +159,30 @@
     return [CPArray arrayWithArray:_buttons];
 }
 
+- (void)setRightButtons:(CPArray)buttons
+{
+    for (var i = [_rightButtons count] - 1; i >= 0; i--)
+    {
+        [_rightButtons[i] removeFromSuperview];
+        [_rightButtons[i] removeObserver:self forKeyPath:@"hidden"];
+    }
+
+    _rightButtons = [CPArray arrayWithArray:buttons];
+
+    for (var i = [_rightButtons count] - 1; i >= 0; i--)
+    {
+        [_rightButtons[i] addObserver:self forKeyPath:@"hidden" options:CPKeyValueObservingOptionNew | CPKeyValueObservingOptionOld context:nil];
+        [_rightButtons[i] setBordered:YES];
+    }
+
+    [self setNeedsLayout];
+}
+
+- (CPArray)rightButtons
+{
+    return [CPArray arrayWithArray:_rightButtons];
+}
+
 - (void)setHasResizeControl:(BOOL)shouldHaveResizeControl
 {
     if (_hasResizeControl === shouldHaveResizeControl)
@@ -218,49 +259,83 @@
         count = [buttonsNotHidden count];
 
     while (count--)
-        if ([buttonsNotHidden[count] isHidden])
-            [buttonsNotHidden removeObject:buttonsNotHidden[count]];
+    {
+        var button = buttonsNotHidden[count];
 
-    var currentButtonOffset = _resizeControlIsLeftAligned ? CGRectGetMaxX([self bounds]) + 1 : -1,
-        bounds = [self bounds],
+        if ([button isHidden])
+        {
+            [button removeFromSuperview];
+            [buttonsNotHidden removeObject:button];
+        }
+    }
+
+    var rightButtonsNotHidden = [CPArray arrayWithArray:_rightButtons],
+        rightCount = [rightButtonsNotHidden count];
+
+    while (rightCount--)
+    {
+        var button = rightButtonsNotHidden[rightCount];
+
+        if ([button isHidden])
+        {
+            [button removeFromSuperview];
+            [rightButtonsNotHidden removeObject:button];
+        }
+    }
+
+    var bounds = [self bounds],
         height = CGRectGetHeight(bounds) - 1,
         frameWidth = CGRectGetWidth(bounds),
         resizeRect = _hasResizeControl ? [self rectForEphemeralSubviewNamed:"resize-control-view"] : CGRectMakeZero(),
         resizeWidth = CGRectGetWidth(resizeRect),
         availableWidth = frameWidth - resizeWidth - 1;
 
-    for (var i = 0, count = [buttonsNotHidden count]; i < count; i++)
+    var currentLeftOffset = _resizeControlIsLeftAligned ? resizeWidth - 1 : -1,
+        currentRightOffset = _resizeControlIsLeftAligned ? CGRectGetMaxX(bounds) + 1 : CGRectGetMaxX(bounds) - resizeWidth + 1;
+
+    var setupButton = function(button, isRightAligned)
     {
-        var button = buttonsNotHidden[i],
-            width = CGRectGetWidth([button frame]);
+        var width = CGRectGetWidth([button frame]);
 
         if (availableWidth > width)
             availableWidth -= width;
         else
-            break;
+            return NO;
 
-        if (_resizeControlIsLeftAligned)
+        if (isRightAligned)
         {
-            [button setFrame:CGRectMake(currentButtonOffset - width, 1, width, height)];
-            currentButtonOffset -= width - 1;
+            [button setFrame:CGRectMake(currentRightOffset - width, 1, width, height)];
+            currentRightOffset -= width - 1;
         }
         else
-        {
-            [button setFrame:CGRectMake(currentButtonOffset, 1, width, height)];
-            currentButtonOffset += width - 1;
+        {[button setFrame:CGRectMake(currentLeftOffset, 1, width, height)];
+            currentLeftOffset += width - 1;
         }
 
-        [button setValue:normalColor forThemeAttribute:@"bezel-color" inState:CPThemeStateNormal | CPThemeStateBordered];
-        [button setValue:highlightedColor forThemeAttribute:@"bezel-color" inState:CPThemeStateHighlighted | CPThemeStateBordered];
-        [button setValue:disabledColor forThemeAttribute:@"bezel-color" inState:CPThemeStateDisabled | CPThemeStateBordered];
+        [button setValue:normalColor forThemeAttribute:@"bezel-color" inStates:[CPThemeStateNormal, CPThemeStateBordered]];
+        [button setValue:highlightedColor forThemeAttribute:@"bezel-color" inStates:[CPThemeStateHighlighted, CPThemeStateBordered]];
+        [button setValue:disabledColor forThemeAttribute:@"bezel-color" inStates:[CPThemeStateDisabled, CPThemeStateBordered]];
         [button setValue:textColor forThemeAttribute:@"text-color" inState:CPThemeStateBordered];
 
-        // FIXME shouldn't need this
-        [button setValue:normalColor forThemeAttribute:@"bezel-color" inState:CPThemeStateNormal | CPThemeStateBordered | CPPopUpButtonStatePullsDown];
-        [button setValue:highlightedColor forThemeAttribute:@"bezel-color" inState:CPThemeStateHighlighted | CPThemeStateBordered | CPPopUpButtonStatePullsDown];
-        [button setValue:disabledColor forThemeAttribute:@"bezel-color" inState:CPThemeStateDisabled | CPThemeStateBordered | CPPopUpButtonStatePullsDown];
+        // FIXME shouldn't need this[button setValue:normalColor forThemeAttribute:@"bezel-color" inStates:[CPThemeStateNormal, CPThemeStateBordered, CPPopUpButtonStatePullsDown]];
+        [button setValue:highlightedColor forThemeAttribute:@"bezel-color" inStates:[CPThemeStateHighlighted, CPThemeStateBordered, CPPopUpButtonStatePullsDown]];
+        [button setValue:disabledColor forThemeAttribute:@"bezel-color" inStates:[CPThemeStateDisabled, CPThemeStateBordered, CPPopUpButtonStatePullsDown]];
 
         [self addSubview:button];
+        
+        return YES;
+    };
+
+    for (var i = 0, count = [buttonsNotHidden count]; i < count; i++)
+    {
+        if (!setupButton(buttonsNotHidden[i], _resizeControlIsLeftAligned))
+            break;
+    }
+
+    for (var i = 0, count = [rightButtonsNotHidden count]; i < count; i++)
+    {
+        if (!setupButton(rightButtonsNotHidden[i], YES))
+            break;
     }
 
     if (_hasResizeControl)
@@ -274,6 +349,14 @@
     }
 }
 
+- (void)observeValueForKeyPath:(CPString)keyPath ofObject:(id)object change:(CPDictionary)change context:(id)context
+{
+    if ([change objectForKey:CPKeyValueChangeOldKey] == [change objectForKey:CPKeyValueChangeNewKey])
+        return;
+
+    [self setNeedsLayout];
+}
+
 - (void)setFrameSize:(CGSize)aSize
 {
     [super setFrameSize:aSize];
@@ -284,7 +367,8 @@
 
 var CPButtonBarHasResizeControlKey = @"CPButtonBarHasResizeControlKey",
     CPButtonBarResizeControlIsLeftAlignedKey = @"CPButtonBarResizeControlIsLeftAlignedKey",
-    CPButtonBarButtonsKey = @"CPButtonBarButtonsKey";
+    CPButtonBarButtonsKey = @"CPButtonBarButtonsKey",
+    CPButtonBarRightButtonsKey = @"CPButtonBarRightButtonsKey";
 
 @implementation CPButtonBar (CPCoding)
 
@@ -295,6 +379,7 @@ var CPButtonBarHasResizeControlKey = @"CPButtonBarHasResizeControlKey",
     [aCoder encodeBool:_hasResizeControl forKey:CPButtonBarHasResizeControlKey];
     [aCoder encodeBool:_resizeControlIsLeftAligned forKey:CPButtonBarResizeControlIsLeftAlignedKey];
     [aCoder encodeObject:_buttons forKey:CPButtonBarButtonsKey];
+    [aCoder encodeObject:_rightButtons forKey:CPButtonBarRightButtonsKey];
 }
 
 - (id)initWithCoder:(CPCoder)aCoder
@@ -302,6 +387,7 @@ var CPButtonBarHasResizeControlKey = @"CPButtonBarHasResizeControlKey",
     if (self = [super initWithCoder:aCoder])
     {
         _buttons = [aCoder decodeObjectForKey:CPButtonBarButtonsKey] || [];
+        _rightButtons = [aCoder decodeObjectForKey:CPButtonBarRightButtonsKey] || [];
         _hasResizeControl = [aCoder decodeBoolForKey:CPButtonBarHasResizeControlKey];
         _resizeControlIsLeftAligned = [aCoder decodeBoolForKey:CPButtonBarResizeControlIsLeftAlignedKey];
     }

AppKit/CPCheckBox.j

@@ -94,21 +94,58 @@ CPCheckBoxImageOffset = 4.0;
     [self takeStateFromKeyPath:aKeyPath ofObjects:objects];
 }
 
-- (CPImage)image
+
+// MARK: -
+// MARK: Override methods from CPButton
+
+- (CGSize)_minimumFrameSize
 {
-    return [self currentValueForThemeAttribute:@"image"];
+    var size = [super _minimumFrameSize],
+        contentView = [self ephemeralSubviewNamed:@"content-view"];
+
+    if (!contentView && [[self title] length])
+    {
+        var minSize = [self currentValueForThemeAttribute:@"min-size"],
+            maxSize = [self currentValueForThemeAttribute:@"max-size"];
+
+        // Here we always add the min size to the control which is the size of the view of the checkBox
+        size.width += minSize.width + CPCheckBoxImageOffset;
+
+        if (maxSize.width >= 0.0)
+            size.width = MIN(size.width, maxSize.width);
+    }
+
+    return size;
 }
 
-- (CPImage)alternateImage
+- (CPThemeState)_contentVisualState
 {
-    return [self currentValueForThemeAttribute:@"image"];
+    // Note : Behavior differs from CPButton as title doesn't follow the highlightsBy content flag
+
+    var visualState  = [self themeState] || CPThemeStateNormal, // Needed during theme compilation
+        currentState = [self state];
+
+    if ((currentState !== CPOffState) && (_showsStateBy & CPContentsCellMask))
+        visualState = visualState.and((currentState === CPOnState) ? CPThemeStateSelected : CPButtonStateMixed);
+
+    return visualState;
 }
 
-- (BOOL)startTrackingAt:(CGPoint)aPoint
+- (CPThemeState)_imageVisualState
 {
-    var startedTracking = [super startTrackingAt:aPoint];
-    [self highlight:YES];
-    return startedTracking;
+    // Note : Behavior differs from CPButton as we don't force "not selected" theme state
+    //        when button is highglighted and selected
+
+    var visualState  = [self themeState] || CPThemeStateNormal, // Needed during theme compilation
+        currentState = [self state];
+
+    if (_isHighlighted && (_highlightsBy & CPContentsCellMask))
+        visualState = visualState.and(CPThemeStateHighlighted);
+
+    if ((currentState !== CPOffState) && (_showsStateBy & CPContentsCellMask))
+        visualState = visualState.and((currentState === CPOnState) ? CPThemeStateSelected : CPButtonStateMixed);
+
+    return visualState;
 }
 
 @end
@@ -139,3 +176,20 @@ CPCheckBoxImageOffset = 4.0;
 }
 
 @end
+
+// MARK: -
+
+@implementation CPCheckBox (TableDataView)
+
+// We overide here _CPObject+Theme setValue:forThemeAttribute as CPCheckBox can be used as tableView data view
+// So, when outside a table data view, setValue:forThemeAttribute should store the value with the CPThemeStateNormal (default behavior)
+// When inside a table data view, it should store the value with the CPThemeStateTableDataView. If not, the value won't be used if the
+// theme defined a value for this attribute for state CPThemeStateTableDataView
+
+- (void)setValue:(id)aValue forThemeAttribute:(CPString)aName
+{
+    [super setValue:aValue forThemeAttribute:aName];
+    [super setValue:aValue forThemeAttribute:aName inState:CPThemeStateTableDataView];
+}
+
+@end

AppKit/CPClipView.j

@@ -46,49 +46,12 @@
         return;
 
     if (_documentView)
-    {
-        var defaultCenter = [CPNotificationCenter defaultCenter];
-
-        [defaultCenter
-            removeObserver:self
-                      name:CPViewFrameDidChangeNotification
-                    object:_documentView];
-
-        [defaultCenter
-            removeObserver:self
-                      name:CPViewBoundsDidChangeNotification
-                    object:_documentView];
-
         [_documentView removeFromSuperview];
-    }
 
     _documentView = aView;
 
     if (_documentView)
-    {
         [self addSubview:_documentView];
-        [self _observeDocumentView];
-    }
-}
-
-- (void)_observeDocumentView
-{
-    var defaultCenter = [CPNotificationCenter defaultCenter];
-
-    [_documentView setPostsFrameChangedNotifications:YES];
-    [_documentView setPostsBoundsChangedNotifications:YES];
-
-    [defaultCenter
-        addObserver:self
-           selector:@selector(viewFrameChanged:)
-               name:CPViewFrameDidChangeNotification
-             object:_documentView];
-
-    [defaultCenter
-        addObserver:self
-           selector:@selector(viewBoundsChanged:)
-               name:CPViewBoundsDidChangeNotification
-             object:_documentView];
 }
 
 /*!
@@ -230,6 +193,11 @@
     return [self scrollToPoint:CGPointMake(bounds.origin.x - deltaX, bounds.origin.y - deltaY)];
 }
 
+- (CGRect)documentVisibleRect
+{
+    return [_documentView visibleRect];
+}
+
 @end
 
 
@@ -244,7 +212,6 @@ var CPClipViewDocumentViewKey = @"CPScrollViewDocumentView";
         // Don't call setDocumentView: here. It calls addSubview:, but it's A) not necessary since the
         // view hierarchy is fully encoded and B) dangerous if the subview is not fully decoded.
         _documentView = [aCoder decodeObjectForKey:CPClipViewDocumentViewKey];
-        [self _observeDocumentView];
     }
 
     return self;

AppKit/CPCollectionView.j

@@ -31,6 +31,37 @@
 @import "CPDragServer_Constants.j"
 @import "CPPasteboard.j"
 @import "CPView.j"
+@import "CPKeyValueBinding.j"
+
+@class _CPCollectionViewDropIndicator
+
+var CPCollectionViewDelegate_collectionView_acceptDrop_index_dropOperation_                 = 1 << 0,
+    CPCollectionViewDelegate_collectionView_canDragItemsAtIndexes_withEvent_                = 1 << 1,
+    CPCollectionViewDelegate_collectionView_writeItemsAtIndexes_toPasteboard_               = 1 << 2,
+    CPCollectionViewDelegate_collectionView_dragTypesForItemsAtIndexes_                     = 1 << 3,
+    CPCollectionViewDelegate_collectionView_dataForItemsAtIndexes_forType_                  = 1 << 4,
+    CPCollectionViewDelegate_collectionView_validateDrop_proposedIndex_dropOperation_       = 1 << 5,
+    CPCollectionViewDelegate_collectionView_didDoubleClickOnItemAtIndex_                    = 1 << 6,
+    CPCollectionViewDelegate_collectionView_menuForItemAtIndex_                             = 1 << 7,
+    CPCollectionViewDelegate_collectionView_draggingViewForItemsAtIndexes_withEvent_offset  = 1 << 8;
+
+
+@protocol CPCollectionViewDelegate <CPObject>
+
+@optional
+- (BOOL)collectionView:(CPCollectionView)collectionView acceptDrop:(id)draggingInfo index:(CPInteger)index dropOperation:(CPCollectionViewDropOperation)dropOperation;
+- (BOOL)collectionView:(CPCollectionView)collectionView canDragItemsAtIndexes:(CPIndexSet)indexes withEvent:(CPEvent)event;
+- (BOOL)collectionView:(CPCollectionView)collectionView writeItemsAtIndexes:(CPIndexSet)indexes toPasteboard:(CPPasteboard)pasteboard;
+- (CPArray)collectionView:(CPCollectionView)collectionView dragTypesForItemsAtIndexes:(CPIndexSet)indexes;
+- (CPData)collectionView:(CPCollectionView)collectionView dataForItemsAtIndexes:(CPIndexSet)indices forType:(CPString)aType;
+- (CPDragOperation)collectionView:(CPCollectionView)collectionView validateDrop:(id)draggingInfo proposedIndex:(CPInteger)proposedDropIndex dropOperation:(CPCollectionViewDropOperation)proposedDropOperation;
+- (CPMenu)collectionView:(CPCollectionView)collectionView menuForItemAtIndex:(CPInteger)anIndex;
+- (CPView)collectionView:(CPCollectionView)collectionView draggingViewForItemsAtIndexes:(CPIndexSet)indexes withEvent:(CPEvent)event offset:(CGPoint)dragImageOffset;
+- (void)collectionView:(CPCollectionView)collectionView didDoubleClickOnItemAtIndex:(int)index;
+
+@end
+
+var HORIZONTAL_MARGIN = 2;
 
 /*!
     @ingroup appkit
@@ -42,10 +73,6 @@
 
     @par Delegate Methods
 
-    @delegate - (void)collectionViewDidChangeSelection:(CPCollectionView)collectionView;
-    DEPRECATED: Please do not use.
-    @param collectionView the collection view who's selection changed
-
     @delegate - (void)collectionView:(CPCollectionView)collectionView didDoubleClickOnItemAtIndex:(int)index;
     Called when the user double-clicks on an item in the collection view.
     @param collectionView the collection view that received the double-click
@@ -64,56 +91,61 @@
     @param indices the indices to obtain drag types
     @return an array of drag types (CPString)
 */
-
-var HORIZONTAL_MARGIN = 2;
-
 @implementation CPCollectionView : CPView
 {
-    CPArray                 _content;
-    CPArray                 _items;
+    CPArray                         _content;
+    CPArray                         _items;
 
-    CPData                  _itemData;
-    CPCollectionViewItem    _itemPrototype;
-    CPCollectionViewItem    _itemForDragging;
-    CPMutableArray          _cachedItems;
+    CPData                          _itemData;
+    CPCollectionViewItem            _itemPrototype;
+    CPCollectionViewItem            _itemForDragging;
+    CPMutableArray                  _cachedItems;
 
-    unsigned                _maxNumberOfRows;
-    unsigned                _maxNumberOfColumns;
+    unsigned                        _maxNumberOfRows;
+    unsigned                        _maxNumberOfColumns;
 
-    CGSize                  _minItemSize;
-    CGSize                  _maxItemSize;
+    CGSize                          _minItemSize;
+    CGSize                          _maxItemSize;
 
-    CPArray                 _backgroundColors;
+    CPArray                         _backgroundColors;
 
-    float                   _tileWidth;
+    float                           _tileWidth;
 
-    BOOL                    _isSelectable;
-    BOOL                    _allowsMultipleSelection;
-    BOOL                    _allowsEmptySelection;
-    CPIndexSet              _selectionIndexes;
+    BOOL                            _isSelectable;
+    BOOL                            _allowsMultipleSelection;
+    BOOL                            _allowsEmptySelection;
+    CPIndexSet                      _selectionIndexes;
 
-    CGSize                  _itemSize;
+    CGSize                          _itemSize;
 
-    float                   _horizontalMargin;
-    float                   _verticalMargin;
+    float                           _horizontalMargin;
+    float                           _verticalMargin;
 
-    unsigned                _numberOfRows;
-    unsigned                _numberOfColumns;
+    unsigned                        _numberOfRows;
+    unsigned                        _numberOfColumns;
 
-    id                      _delegate;
+    id <CPCollectionViewDelegate>   _delegate;
+    unsigned                        _implementedDelegateMethods;
 
-    CPEvent                 _mouseDownEvent;
+    CPEvent                         _mouseDownEvent;
 
-    BOOL                    _needsMinMaxItemSizeUpdate;
-    CGSize                  _storedFrameSize;
+    BOOL                            _needsMinMaxItemSizeUpdate;
+    CGSize                          _storedFrameSize;
 
-    BOOL                    _uniformSubviewsResizing @accessors(property=uniformSubviewsResizing);
-    BOOL                    _lockResizing;
+    BOOL                            _uniformSubviewsResizing @accessors(property=uniformSubviewsResizing);
 
-    CPInteger               _currentDropIndex;
-    CPDragOperation         _currentDragOperation;
+    CPInteger                       _currentDropIndex;
+    CPDragOperation                 _currentDragOperation;
 
-    _CPCollectionViewDropIndicator _dropView;
+    _CPCollectionViewDropIndicator  _dropView;
+}
+
++ (Class)_binderClassForBinding:(CPString)aBinding
+{
+    if (aBinding == CPContentBinding)
+        return [_CPCollectionViewContentBinder class];
+
+    return [super _binderClassForBinding:aBinding];
 }
 
 - (id)initWithFrame:(CGRect)aFrame
@@ -158,7 +190,7 @@ var HORIZONTAL_MARGIN = 2;
 
     _needsMinMaxItemSizeUpdate = YES;
     _uniformSubviewsResizing = NO;
-    _lockResizing = NO;
+    _inLiveResize = NO;
 
     _currentDropIndex      = -1;
     _currentDragOperation  = CPDragOperationNone;
@@ -168,6 +200,51 @@ var HORIZONTAL_MARGIN = 2;
     [self setAutoresizingMask:0];
 }
 
+
+
+// MARK: -
+// MARK: Delegate
+
+/*!
+    Set the delegate of the receiver
+    @param aDelegate the delegate object for the collectionView.
+*/
+- (void)setDelegate:(id <CPCollectionViewDelegate>)aDelegate
+{
+    if (_delegate === aDelegate)
+        return;
+
+    _delegate = aDelegate;
+    _implementedDelegateMethods = 0;
+
+    if ([_delegate respondsToSelector:@selector(collectionView:acceptDrop:index:dropOperation:)])
+        _implementedDelegateMethods |= CPCollectionViewDelegate_collectionView_acceptDrop_index_dropOperation_;
+
+    if ([_delegate respondsToSelector:@selector(collectionView:canDragItemsAtIndexes:withEvent:)])
+        _implementedDelegateMethods |= CPCollectionViewDelegate_collectionView_canDragItemsAtIndexes_withEvent_;
+
+    if ([_delegate respondsToSelector:@selector(collectionView:writeItemsAtIndexes:toPasteboard:)])
+        _implementedDelegateMethods |= CPCollectionViewDelegate_collectionView_writeItemsAtIndexes_toPasteboard_;
+
+    if ([_delegate respondsToSelector:@selector(collectionView:dragTypesForItemsAtIndexes:)])
+        _implementedDelegateMethods |= CPCollectionViewDelegate_collectionView_dragTypesForItemsAtIndexes_;
+
+    if ([_delegate respondsToSelector:@selector(collectionView:dataForItemsAtIndexes:forType:)])
+        _implementedDelegateMethods |= CPCollectionViewDelegate_collectionView_dataForItemsAtIndexes_forType_;
+
+    if ([_delegate respondsToSelector:@selector(collectionView:validateDrop:proposedIndex:dropOperation:)])
+        _implementedDelegateMethods |= CPCollectionViewDelegate_collectionView_validateDrop_proposedIndex_dropOperation_;
+
+    if ([_delegate respondsToSelector:@selector(collectionView:didDoubleClickOnItemAtIndex:)])
+        _implementedDelegateMethods |= CPCollectionViewDelegate_collectionView_didDoubleClickOnItemAtIndex_;
+
+    if ([_delegate respondsToSelector:@selector(collectionView:menuForItemAtIndex:)])
+        _implementedDelegateMethods |= CPCollectionViewDelegate_collectionView_menuForItemAtIndex_;
+
+    if ([_delegate respondsToSelector:@selector(collectionView:draggingViewForItemsAtIndexes:withEvent:offset:)])
+        _implementedDelegateMethods |= CPCollectionViewDelegate_collectionView_draggingViewForItemsAtIndexes_withEvent_offset;
+}
+
 /*!
     Sets the item prototype to \c anItem
     @param anItem the new item prototype.
@@ -315,14 +392,7 @@ var HORIZONTAL_MARGIN = 2;
     _isSelectable = isSelectable;
 
     if (!_isSelectable)
-    {
-        var index = CPNotFound,
-            itemCount = [_items count];
-
-        // Be wary of invalid selection ranges since setContent: does not clear selection indexes.
-        while ((index = [_selectionIndexes indexGreaterThanIndex:index]) != CPNotFound && index < itemCount)
-            [_items[index] setSelected:NO];
-    }
+        [self _applySelectionToItems:NO];
 }
 
 /*!
@@ -376,31 +446,18 @@ var HORIZONTAL_MARGIN = 2;
 {
     if (!anIndexSet)
         anIndexSet = [CPIndexSet indexSet];
+
     if (!_isSelectable || [_selectionIndexes isEqual:anIndexSet])
         return;
 
-    var index = CPNotFound,
-        itemCount = [_items count];
-
-    // Be wary of invalid selection ranges since setContent: does not clear selection indexes.
-    while ((index = [_selectionIndexes indexGreaterThanIndex:index]) !== CPNotFound && index < itemCount)
-        [_items[index] setSelected:NO];
+    [self _applySelectionToItems:NO];
 
     _selectionIndexes = anIndexSet;
 
-    var index = CPNotFound;
-
-    while ((index = [_selectionIndexes indexGreaterThanIndex:index]) !== CPNotFound)
-        [_items[index] setSelected:YES];
+    [self _applySelectionToItems:YES];
 
     var binderClass = [[self class] _binderClassForBinding:@"selectionIndexes"];
     [[binderClass getBinding:@"selectionIndexes" forObject:self] reverseSetValueFor:@"selectionIndexes"];
-
-    if ([_delegate respondsToSelector:@selector(collectionViewDidChangeSelection:)])
-    {
-        CPLog.warn("The delegate method collectionViewDidChangeSelection: is deprecated and will be removed in a future version, please bind to selectionIndexes instead.");
-        [_delegate collectionViewDidChangeSelection:self];
-    }
 }
 
 /*!
@@ -462,14 +519,14 @@ var HORIZONTAL_MARGIN = 2;
 
 - (void)resizeWithOldSuperviewSize:(CGSize)oldBoundsSize
 {
-    if (_lockResizing)
+    if (_inLiveResize)
         return;
 
-    _lockResizing = YES;
+    _inLiveResize = YES;
 
     [self tile];
 
-    _lockResizing = NO;
+    _inLiveResize = NO;
 }
 
 - (void)tile
@@ -543,9 +600,12 @@ var HORIZONTAL_MARGIN = 2;
     if (_maxNumberOfRows > 0)
         numberOfRows = MIN(numberOfRows, _maxNumberOfRows);
 
-    height = MAX(height, numberOfRows * (_minItemSize.height + _verticalMargin));
+    // calculate the required height: (sum of item heights) + (sum of margins between items).
+    var requiredHeight = (numberOfRows * _minItemSize.height) + (MAX(0, numberOfRows - 1) * _verticalMargin);
+    height = MAX(height, requiredHeight);
 
-    var itemSizeHeight = FLOOR(height / numberOfRows);
+    // calculate individual item height based on the total available height.
+    var itemSizeHeight = (numberOfRows > 0) ? FLOOR((height - (MAX(0, numberOfRows - 1) * _verticalMargin)) / numberOfRows) : 0;
 
     if (maxItemSizeHeight > 0)
         itemSizeHeight = MIN(itemSizeHeight, maxItemSizeHeight);
@@ -564,7 +624,7 @@ var HORIZONTAL_MARGIN = 2;
     _horizontalMargin = _uniformSubviewsResizing ? FLOOR((aFrameSize.width - numberOfColumns * anItemSize.width) / (numberOfColumns + 1)) : HORIZONTAL_MARGIN;
 
     var x = _horizontalMargin,
-        y = -anItemSize.height;
+    y = -anItemSize.height;
 
     [displayItems enumerateObjectsUsingBlock:function(item, idx, stop)
     {
@@ -579,7 +639,11 @@ var HORIZONTAL_MARGIN = 2;
         if (idx % numberOfColumns == 0)
         {
             x = _horizontalMargin;
-            y += _verticalMargin + anItemSize.height;
+            // For the first row, don't add a margin. For all subsequent rows, add the margin.
+            if (idx === 0)
+                y += anItemSize.height;
+            else
+                y += _verticalMargin + anItemSize.height;
         }
 
         [view setFrameOrigin:CGPointMake(x, y)];
@@ -682,7 +746,7 @@ var HORIZONTAL_MARGIN = 2;
 */
 - (void)setMinItemSize:(CGSize)aSize
 {
-    if (aSize === nil || aSize === undefined)
+    if (aSize == nil)
         [CPException raise:CPInvalidArgumentException reason:"Invalid value provided for minimum size"];
 
     if (CGSizeEqualToSize(_minItemSize, aSize))
@@ -755,8 +819,8 @@ var HORIZONTAL_MARGIN = 2;
 
 - (void)mouseUp:(CPEvent)anEvent
 {
-    if ([_selectionIndexes count] && [anEvent clickCount] == 2 && [_delegate respondsToSelector:@selector(collectionView:didDoubleClickOnItemAtIndex:)])
-        [_delegate collectionView:self didDoubleClickOnItemAtIndex:[_selectionIndexes firstIndex]];
+    if ([_selectionIndexes count] && [anEvent clickCount] == 2)
+        [self _sendDelegateDidDoubleClickOnItemAtIndex:[_selectionIndexes firstIndex]];
 }
 
 - (void)mouseDown:(CPEvent)anEvent
@@ -846,15 +910,6 @@ var HORIZONTAL_MARGIN = 2;
     return _verticalMargin;
 }
 
-/*!
-    Sets the collection view's delegate
-    @param aDelegate the new delegate
-*/
-- (void)setDelegate:(id)aDelegate
-{
-    _delegate = aDelegate;
-}
-
 /*!
     Returns the collection view's delegate
 */
@@ -868,13 +923,13 @@ var HORIZONTAL_MARGIN = 2;
 */
 - (CPMenu)menuForEvent:(CPEvent)theEvent
 {
-    if (![[self delegate] respondsToSelector:@selector(collectionView:menuForItemAtIndex:)])
+    if (![self _delegateRespondsToCollectionViewMenuForItemAtIndex])
         return [super menuForEvent:theEvent];
 
     var location = [self convertPoint:[theEvent locationInWindow] fromView:nil],
         index = [self _indexAtPoint:location];
 
-    return [_delegate collectionView:self menuForItemAtIndex:index];
+    return [self _sendDelegateMenuForItemAtIndex:index];
 }
 
 - (int)_indexAtPoint:(CGPoint)thePoint
@@ -918,6 +973,20 @@ var HORIZONTAL_MARGIN = 2;
     return frame;
 }
 
+- (void)_applySelectionToItems:(BOOL)select
+{
+    var numberOfItems = [_items count];
+
+    [_selectionIndexes enumerateIndexesUsingBlock:function(idx, stop)
+    {
+        if (idx < numberOfItems)
+            [[_items objectAtIndex:idx] setSelected:select];
+        else {
+            stop(YES);
+        }
+    }];
+}
+
 @end
 
 @implementation CPCollectionView (DragAndDrop)
@@ -932,7 +1001,7 @@ var HORIZONTAL_MARGIN = 2;
 */
 - (void)pasteboard:(CPPasteboard)aPasteboard provideDataForType:(CPString)aType
 {
-    [aPasteboard setData:[_delegate collectionView:self dataForItemsAtIndexes:_selectionIndexes forType:aType] forType:aType];
+    [aPasteboard setData:[self _sendDelegateDataForItemsAtIndexes:_selectionIndexes forType:aType] forType:aType];
 }
 
 - (void)_createDropIndicatorIfNeeded
@@ -962,24 +1031,23 @@ var HORIZONTAL_MARGIN = 2;
         (ABS(locationInWindow.y - mouseDownLocationInWindow.y) < 3))
         return;
 
-    if (![_delegate respondsToSelector:@selector(collectionView:dragTypesForItemsAtIndexes:)])
+    if (![self _delegateRespondsToCollectionViewDragTypesForItemsAtIndexes])
         return;
 
     // If we don't have any selected items, we've clicked away, and thus the drag is meaningless.
     if (![_selectionIndexes count])
         return;
 
-    if ([_delegate respondsToSelector:@selector(collectionView:canDragItemsAtIndexes:withEvent:)] &&
-        ![_delegate collectionView:self canDragItemsAtIndexes:_selectionIndexes withEvent:_mouseDownEvent])
+    if (![self _sendDelegateCanDragItemsAtIndexes:_selectionIndexes withEvent:_mouseDownEvent])
         return;
 
     // Set up the pasteboard
-    var dragTypes = [_delegate collectionView:self dragTypesForItemsAtIndexes:_selectionIndexes];
+    var dragTypes = [self _sendDelegateDragTypesForItemsAtIndexes:_selectionIndexes];
 
     [[CPPasteboard pasteboardWithName:CPDragPboard] declareTypes:dragTypes owner:self];
 
     var dragImageOffset = CGSizeMakeZero(),
-        view = [self _draggingViewForItemsAtIndexes:_selectionIndexes withEvent:_mouseDownEvent offset:dragImageOffset];
+        view = [self _sendDelegateDraggingViewForItemsAtIndexes:_selectionIndexes withEvent:_mouseDownEvent offset:dragImageOffset];
 
     [view setFrameSize:_itemSize];
     [view setAlphaValue:0.7];
@@ -996,14 +1064,6 @@ var HORIZONTAL_MARGIN = 2;
         slideBack:YES];
 }
 
-- (CPView)_draggingViewForItemsAtIndexes:(CPIndexSet)indexes withEvent:(CPEvent)anEvent offset:(CGPoint)offset
-{
-    if ([_delegate respondsToSelector:@selector(collectionView:draggingViewForItemsAtIndexes:withEvent:offset:)])
-        return [_delegate collectionView:self draggingViewForItemsAtIndexes:indexes withEvent:anEvent offset:offset];
-
-    return [self draggingViewForItemsAtIndexes:indexes withEvent:anEvent offset:offset];
-}
-
 - (CPView)draggingViewForItemsAtIndexes:(CPIndexSet)indexes withEvent:(CPEvent)event offset:(CGPoint)dragImageOffset
 {
     var idx = _content[[indexes firstIndex]];
@@ -1016,14 +1076,6 @@ var HORIZONTAL_MARGIN = 2;
     return [_itemForDragging view];
 }
 
-- (BOOL)_canDragItemsAtIndexes:(CPIndexSet)indexes withEvent:(CPEvent)anEvent
-{
-    if ([self respondsToSelector:@selector(collectionView:canDragItemsAtIndexes:withEvent:)])
-        return [_delegate collectionView:self canDragItemsAtIndexes:indexes withEvent:anEvent];
-
-  return YES;
-}
-
 - (CPDragOperation)draggingEntered:(id)draggingInfo
 {
     var dropIndex = -1,
@@ -1061,16 +1113,14 @@ var HORIZONTAL_MARGIN = 2;
     var result = CPDragOperationMove,
         dropIndex = [self _dropIndexForDraggingInfo:draggingInfo proposedDropOperation:dropOperation];
 
-    if ([_delegate respondsToSelector:@selector(collectionView:validateDrop:proposedIndex:dropOperation:)])
+    if ([self _delegateRespondsToCollectionViewValidateDropProposedIndexDropOperation])
     {
         var dropIndexRef2 = @ref(dropIndex);
 
-        result = [_delegate collectionView:self validateDrop:draggingInfo proposedIndex:dropIndexRef2  dropOperation:dropOperation];
+        result = [self _sendDelegateValidateDrop:draggingInfo proposedIndex:dropIndexRef2  dropOperation:dropOperation];
 
         if (result !== CPDragOperationNone)
-        {
             dropIndex = dropIndexRef2();
-        }
     }
 
     dropIndexRef(dropIndex);
@@ -1104,7 +1154,7 @@ Not supported. Use -collectionView:dataForItemsAtIndexes:fortype:
     var result = NO;
 
     if (_currentDragOperation && _currentDropIndex !== -1)
-        result = [_delegate collectionView:self acceptDrop:draggingInfo index:_currentDropIndex dropOperation:1];
+        result = [self _sendDelegateAcceptDrop:draggingInfo index:_currentDropIndex dropOperation:1];
 
     [self draggingEnded:draggingInfo]; // Is this correct ?
 
@@ -1329,6 +1379,7 @@ Not supported. Use -collectionView:dataForItemsAtIndexes:fortype:
 
 @end
 
+
 @implementation CPCollectionView (Deprecated)
 
 - (CGRect)rectForItemAtIndex:(int)anIndex
@@ -1349,6 +1400,148 @@ Not supported. Use -collectionView:dataForItemsAtIndexes:fortype:
 
 @end
 
+
+@implementation CPCollectionView (CPCollectionViewDelegate)
+
+/*
+    @ignore
+    Return YES if the delegate implements collectionView:validateDrop:proposedIndex:dropOperation:
+*/
+- (BOOL)_delegateRespondsToCollectionViewValidateDropProposedIndexDropOperation
+{
+    return _implementedDelegateMethods & CPCollectionViewDelegate_collectionView_validateDrop_proposedIndex_dropOperation_;
+}
+
+/*
+    @ignore
+    Return YES if the delegate implements collectionView:menuForItemAtIndex:
+*/
+- (BOOL)_delegateRespondsToCollectionViewMenuForItemAtIndex
+{
+    return _implementedDelegateMethods & CPCollectionViewDelegate_collectionView_menuForItemAtIndex_;
+}
+
+/*
+    @ignore
+    Return YES if the delegate implements collectionView:dragTypesForItemsAtIndexes:
+*/
+- (BOOL)_delegateRespondsToCollectionViewDragTypesForItemsAtIndexes
+{
+    return _implementedDelegateMethods & CPCollectionViewDelegate_collectionView_dragTypesForItemsAtIndexes_;
+}
+
+/*!
+    @ignore
+    Call delegate collectionView:acceptDrop:index:dropOperation:
+*/
+- (BOOL)_sendDelegateAcceptDrop:(id)draggingInfo index:(CPInteger)index dropOperation:(CPCollectionViewDropOperation)dropOperation
+{
+    if (!(_implementedDelegateMethods & CPCollectionViewDelegate_collectionView_acceptDrop_index_dropOperation_))
+        return NO;
+
+    return [_delegate collectionView:self acceptDrop:draggingInfo index:index dropOperation:dropOperation];
+}
+
+/*!
+    @ignore
+    Call delegate collectionView:canDragItemsAtIndexes:withEvent:
+*/
+- (BOOL)_sendDelegateCanDragItemsAtIndexes:(CPIndexSet)indexes withEvent:(CPEvent)anEvent
+{
+    if (!(_implementedDelegateMethods & CPCollectionViewDelegate_collectionView_canDragItemsAtIndexes_withEvent_))
+        return YES;
+
+    return [_delegate collectionView:self canDragItemsAtIndexes:indexes withEvent:anEvent];
+}
+
+/*!
+    @ignore
+    Call delegate collectionView:writeItemsAtIndexes:toPasteboard:
+*/
+- (BOOL)_sendDelegateWriteItemsAtIndexes:(CPIndexSet)indexes toPasteboard:(CPPasteboard)pasteboard
+{
+    if (!(_implementedDelegateMethods & CPCollectionViewDelegate_collectionView_writeItemsAtIndexes_toPasteboard_))
+        return NO;
+
+    return [_delegate collectionView:self writeItemsAtIndexes:indexes toPasteboard:pasteboard];
+}
+
+/*!
+    @ignore
+    Call delegate collectionView:dragTypesForItemsAtIndexes:
+*/
+- (CPArray)_sendDelegateDragTypesForItemsAtIndexes:(CPIndexSet)indexes
+{
+    if (!(_implementedDelegateMethods & CPCollectionViewDelegate_collectionView_dragTypesForItemsAtIndexes_))
+        return [];
+
+    return [_delegate collectionView:self dragTypesForItemsAtIndexes:indexes];
+}
+
+/*!
+    @ignore
+    Call delegate collectionView:dataForItemsAtIndexes:forType:
+*/
+- (CPData)_sendDelegateDataForItemsAtIndexes:(CPIndexSet)indexes forType:(CPString)aType
+{
+    if (!(_implementedDelegateMethods & CPCollectionViewDelegate_collectionView_dataForItemsAtIndexes_forType_))
+        return nil;
+
+    return [_delegate collectionView:self dataForItemsAtIndexes:indexes forType:aType];
+}
+
+/*!
+    @ignore
+    Call delegate collectionView:validateDrop:proposedIndex:dropOperation:
+*/
+- (CPDragOperation)_sendDelegateValidateDrop:(id)draggingInfo proposedIndex:(CPInteger)proposedDropIndex dropOperation:(CPCollectionViewDropOperation)proposedDropOperation
+{
+    if (!(_implementedDelegateMethods & CPCollectionViewDelegate_collectionView_validateDrop_proposedIndex_dropOperation_))
+        return CPDragOperationNone;
+
+    return [_delegate collectionView:self validateDrop:draggingInfo proposedIndex:proposedDropIndex dropOperation:proposedDropOperation];
+}
+
+/*!
+    @ignore
+    Call delegate collectionView:didDoubleClickOnItemAtIndex:
+*/
+- (void)_sendDelegateDidDoubleClickOnItemAtIndex:(int)index
+{
+    if (!(_implementedDelegateMethods & CPCollectionViewDelegate_collectionView_didDoubleClickOnItemAtIndex_))
+        return;
+
+    return [_delegate collectionView:self didDoubleClickOnItemAtIndex:index];
+}
+
+
+/*!
+    @ignore
+    Call delegate collectionView:menuForItemAtIndex:
+*/
+- (void)_sendDelegateMenuForItemAtIndex:(CPInteger)anIndex
+{
+    if (!(_implementedDelegateMethods & CPCollectionViewDelegate_collectionView_menuForItemAtIndex_))
+        return nil;
+
+    return [_delegate collectionView:self menuForItemAtIndex:anIndex];
+}
+
+/*!
+    @ignore
+    Call delegate draggingViewForItemsAtIndexes:withEvent:offset:
+*/
+- (CPView)_sendDelegateDraggingViewForItemsAtIndexes:(CPIndexSet)indexes withEvent:(CPEvent)anEvent offset:(CGPoint)dragImageOffset
+{
+    if (!(_implementedDelegateMethods & CPCollectionViewDelegate_collectionView_draggingViewForItemsAtIndexes_withEvent_offset))
+        return [self draggingViewForItemsAtIndexes:indexes withEvent:anEvent offset:dragImageOffset];
+
+    return [_delegate collectionView:self draggingViewForItemsAtIndexes:indexes withEvent:anEvent offset:dragImageOffset];
+}
+
+@end
+
+
 var CPCollectionViewMinItemSizeKey              = @"CPCollectionViewMinItemSizeKey",
     CPCollectionViewMaxItemSizeKey              = @"CPCollectionViewMaxItemSizeKey",
     CPCollectionViewVerticalMarginKey           = @"CPCollectionViewVerticalMarginKey",
@@ -1408,3 +1601,14 @@ var CPCollectionViewMinItemSizeKey              = @"CPCollectionViewMinItemSizeK
 }
 
 @end
+
+@implementation _CPCollectionViewContentBinder : CPBinder
+{
+}
+
+- (void)setValue:(id)aValue forBinding:(CPString)aBinding
+{
+    [_source setContent:aValue];
+}
+
+@end

AppKit/CPColor.j

@@ -25,6 +25,7 @@
 
 @import "CGColor.j"
 
+@import "_CPObject+Theme.j"
 @import "CPCompatibility.j"
 @import "CPImage.j"
 
@@ -65,7 +66,8 @@ var cachedBlackColor,
     cachedOrangeColor,
     cachedPurpleColor,
     cachedShadowColor,
-    cachedClearColor;
+    cachedClearColor,
+    cachedThemeColor;
 
 /// @endcond
 
@@ -78,13 +80,37 @@ var cachedBlackColor,
     <p>It also provides some class helper methods that
     returns instances of commonly used colors.</p>
 */
-@implementation CPColor : CPObject
+@implementation CPColor : CPObject <CPTheme>
 {
     CPArray     _components;
 
     CPImage     _patternImage;
     CPString    _cssString;
 }
+@global document
+
+// MARK: -
+// MARK: Theming
+
++ (CPString)defaultThemeClass
+{
+    return "color";
+}
+
++ (CPDictionary)themeAttributes
+{
+    return @{
+            @"alternate-selected-control-color":        [CPNull null],
+            @"secondary-selected-control-color":        [CPNull null],
+            @"selected-text-background-color":          [CPNull null],
+            @"selected-text-inactive-background-color": [CPNull null],
+            @"css-based":                               NO
+        };
+}
+
+
+// MARK: -
+// MARK: Static methods
 
 /*!
     Creates a color in the RGB colorspace, with an alpha value.
@@ -241,7 +267,7 @@ var cachedBlackColor,
 
     @return an initialized RGB color
 */
-+ (CPColor)colorWithHexString:(string)hex
++ (CPColor)colorWithHexString:(CPString)hex
 {
     var rgba = hexToRGB(hex);
     return rgba ? [[CPColor alloc] _initWithRGBA: rgba] : null;
@@ -436,14 +462,22 @@ var cachedBlackColor,
     return cachedClearColor;
 }
 
++ (CPColor)_cachedThemeColor
+{
+    if (!cachedThemeColor)
+        cachedThemeColor = [self colorWithCalibratedWhite:0.0 alpha:0.0];
+
+    return cachedThemeColor;
+}
+
 + (CPColor)alternateSelectedControlColor
 {
-    return [[CPColor alloc] _initWithRGBA:[0.22, 0.46, 0.84, 1.0]];
+    return [[self _cachedThemeColor] valueForThemeAttribute:@"alternate-selected-control-color"];
 }
 
 + (CPColor)secondarySelectedControlColor
 {
-    return [[CPColor alloc] _initWithRGBA:[0.83, 0.83, 0.83, 1.0]];
+    return [[self _cachedThemeColor] valueForThemeAttribute:@"secondary-selected-control-color"];
 }
 
 /*!
@@ -467,6 +501,16 @@ var cachedBlackColor,
     return [[CPColor alloc] _initWithCSSString: aString];
 }
 
++ (CPColor)selectedTextBackgroundColor
+{
+    return [[self _cachedThemeColor] valueForThemeAttribute:@"selected-text-background-color"] || [CPColor colorWithHexString:"99CCFF"];
+}
+
++ (CPColor)_selectedTextBackgroundColorUnfocussed
+{
+    return [[self _cachedThemeColor] valueForThemeAttribute:@"selected-text-inactive-background-color"] || [CPColor colorWithHexString:"CCCCCC"];
+}
+
 /* @ignore */
 - (id)_initWithCSSString:(CPString)aString
 {
@@ -489,6 +533,10 @@ var cachedBlackColor,
     // use it (issue #1413.)
     [self _initCSSStringFromComponents];
 
+    _theme = [CPTheme defaultTheme];
+    _themeState = CPThemeStateNormal;
+    [self _loadThemeAttributes];
+
     return self;
 }
 
@@ -502,6 +550,10 @@ var cachedBlackColor,
         _components = components;
 
         [self _initCSSStringFromComponents];
+
+        _theme = [CPTheme defaultTheme];
+        _themeState = CPThemeStateNormal;
+        [self _loadThemeAttributes];
     }
 
     return self;
@@ -509,7 +561,11 @@ var cachedBlackColor,
 
 - (void)_initCSSStringFromComponents
 {
-    var hasAlpha = CPFeatureIsCompatible(CPCSSRGBAFeature) && _components[3] != 1.0;
+    // Fix to avoid a problem when compiling a theme (missing the alpha component as theme compiler doesn't have CSS rgba capability)
+    var hasAlpha = YES;
+#if PLATFORM(DOM)
+    hasAlpha = CPFeatureIsCompatible(CPCSSRGBAFeature) && _components[3] != 1.0;
+#endif
 
     _cssString = (hasAlpha ? "rgba(" : "rgb(") +
         parseInt(_components[0] * 255.0) + ", " +
@@ -528,6 +584,10 @@ var cachedBlackColor,
         _patternImage = anImage;
         _cssString = "url(\"" + [_patternImage filename] + "\")";
         _components = [0.0, 0.0, 0.0, 1.0];
+
+        _theme = [CPTheme defaultTheme];
+        _themeState = CPThemeStateNormal;
+        [self _loadThemeAttributes];
     }
 
     return self;
@@ -744,6 +804,9 @@ url("data:image/png;base64,BASE64ENCODEDDATA")  // if there is a pattern image
     var description = [super description],
         patternImage = [self patternImage];
 
+    if ([self isCSSBased])
+        return description + "\n" + [self cssDictionary]+ "\nBefore:\n" + [self cssBeforeDictionary] + "\nAfter:\n" + [self cssAfterDictionary];
+
     if (!patternImage)
         return description + " " + [self cssString];
 
@@ -813,11 +876,229 @@ url("data:image/png;base64,BASE64ENCODEDDATA")  // if there is a pattern image
     return [CPColor colorWithRed:RAND() green:RAND() blue:RAND() alpha:1.0];
 }
 
++ (CPColor)checkerBoardColor
+{
+    // Thanks to cocco http://stackoverflow.com/a/18368212/76900.
+    return [CPColor colorWithPatternImage:[[CPImage alloc] initWithContentsOfFile:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEX////MzMw46qqDAAAAEElEQVQImWNg+M+AFeEQBgB+vw/xfUUZkgAAAABJRU5ErkJggg=="]];
+}
+
 @end
 
+// MARK: -
+// MARK: CSS Theming
+
+// The code below adds support for CSS theming with 100% compatibility with current theming system.
+// The idea is to extend CPColor (and CPImage) with CSS components and adapt low level UI components to
+// support this new kind of CPColor/CPImage. See CPImageView, CPView and _CPImageAndTextView.
+//
+// To create a CPColor that uses CSS, simply use the new class method :
+// + (CPColor)colorWithCSSDictionary:(CPDictionary)aDictionary beforeDictionary:(CPDictionary)beforeDictionary afterDictionary:(CPDictionary)afterDictionary
+// where beforeDictionary & afterDictionary are related to ::before & ::after pseudo-elements.
+// If you don't need them, just use the simplified class method :
+// + (CPColor)colorWithCSSDictionary:(CPDictionary)aDictionary
+//
+// Example :
+// buttonCssColor = [CPColor colorWithCSSDictionary:@{
+//                                                    @"background-color": A3ColorBackgroundWhite,
+//                                                    @"border-color": A3ColorActiveBorder,
+//                                                    @"border-style": @"solid",
+//                                                    @"border-width": @"1px",
+//                                                    @"border-radius": @"3px",
+//                                                    @"box-sizing": @"border-box"
+//                                                    }
+//                                 beforeDictionary:@{
+//                                                    @"background-color": @"rgb(225,225,225)",
+//                                                    @"bottom": @"3px",
+//                                                    @"content": @"''",
+//                                                    @"position": @"absolute",
+//                                                    @"right": @"21px",
+//                                                    @"top": @"3px",
+//                                                    @"width": @"1px"
+//                                                    }
+//                                  afterDictionary:@{
+//                                                    @"content": @"''",
+//                                                    @"bottom": @"3px",
+//                                                    @"right": @"6px",
+//                                                    @"top": @"1px",
+//                                                    @"position": @"absolute",
+//                                                    @"height": @"14px",
+//                                                    @"width": @"9px",
+//                                                    @"margin": @"2px 0px 2px 0px",
+//                                                    @"background-image": @"url(%%packed.png)",
+//                                                    @"background-position": @"0px -64px",
+//                                                    @"background-repeat": @"no-repeat",
+//                                                    @"background-size": @"100px 400px"
+//                                                    }];
+//
+// Remark : Please note the special URL of the background image used in this example : url(%%packed.png)
+//          During theme loading, "%%" will be replaced by the path to the theme blend resources folder.
+//          Typically, a CSS theme will use some (rare) images all packed together in a single image resource (see packed.png in Aristo3 theme)
+//
+//          Also, please note that if you don't use one of the CSS components, you can either set it to nil (best solution) or to an empty dictionary, like :
+//          aCssColor = [CPColor colorWithCSSDictionary:@{} beforeDictionary:nil afterDictionary:@{ ... }];
+//
+// You can use -(BOOL)isCSSBased to determine how to cope with it in your code.
+// -(BOOL)hasCSSDictionary, -(BOOL)hasCSSBeforeDictionary and -(BOOL)hasCSSAfterDictionary are convience methods you can use.
+//
+// Remark : +(void)restorePreviousCSSState and -(DOMElement)applyCSSColorForView are meant to be used by low level UI widgets (like CPView) to implement
+//          CSS theme support.
+
+@implementation CPColor (CSSTheming)
+{
+    CPDictionary    _cssDictionary              @accessors(property=cssDictionary);
+    CPDictionary    _cssBeforeDictionary        @accessors(property=cssBeforeDictionary);
+    CPDictionary    _cssAfterDictionary         @accessors(property=cssAfterDictionary);
+}
+
++ (CPColor)colorWithCSSDictionary:(CPDictionary)aDictionary
+{
+    return [[CPColor alloc] _initWithCSSDictionary:aDictionary beforeDictionary:nil afterDictionary:nil];
+}
+
++ (CPColor)colorWithCSSDictionary:(CPDictionary)aDictionary beforeDictionary:(CPDictionary)beforeDictionary afterDictionary:(CPDictionary)afterDictionary
+{
+    return [[CPColor alloc] _initWithCSSDictionary:aDictionary beforeDictionary:beforeDictionary afterDictionary:afterDictionary];
+}
+
+- (id)_initWithCSSDictionary:(CPDictionary)aDictionary beforeDictionary:(CPDictionary)beforeDictionary afterDictionary:(CPDictionary)afterDictionary
+{
+    self = [super init];
+
+    if (self)
+    {
+        _cssDictionary       = aDictionary;
+        _cssBeforeDictionary = beforeDictionary;
+        _cssAfterDictionary  = afterDictionary;
+        _components          = [0.0, 0.0, 0.0, 1.0];
+
+        _theme = [CPTheme defaultTheme];
+        _themeState = CPThemeStateNormal;
+        [self _loadThemeAttributes];
+    }
+
+    return self;
+}
+
+- (BOOL)isCSSBased
+{
+    return !!(_cssDictionary || _cssBeforeDictionary || _cssAfterDictionary);
+}
+
+- (BOOL)hasCSSDictionary
+{
+    return ([_cssDictionary count] > 0);
+}
+
+- (BOOL)hasCSSBeforeDictionary
+{
+    return ([_cssBeforeDictionary count] > 0);
+}
+
+- (BOOL)hasCSSAfterDictionary
+{
+    return ([_cssAfterDictionary count] > 0);
+}
+
++ (void)restorePreviousCSSState:(CPArrayRef)aPreviousStateRef forDOMElement:(DOMElement)aDOMElement
+{
+#if PLATFORM(DOM)
+    var aPreviousState = @deref(aPreviousStateRef);
+
+    for (var i = 0, count = aPreviousState.length; i < count; i++)
+        aDOMElement.style[aPreviousState[i][0]] = aPreviousState[i][1];
+
+    @deref(aPreviousStateRef) = @[];
+#endif
+}
+
+- (DOMElement)applyCSSColorForView:(CPView)aView onDOMElement:(DOMElement)aDOMElement styleNode:(DOMElement)aStyleNode previousState:(CPArrayRef)aPreviousStateRef
+{
+#if PLATFORM(DOM)
+    var aPreviousState = @deref(aPreviousStateRef);
+
+    [_cssDictionary enumerateKeysAndObjectsUsingBlock:function(aKey, anObject, stop)
+     {
+         [aPreviousState addObject:@[aKey, aDOMElement.style[aKey]]];
+         aDOMElement.style[aKey] = anObject;
+     }];
+
+    if ([self hasCSSBeforeDictionary] || [self hasCSSAfterDictionary])
+    {
+        // We need to create a unique class name
+
+        var styleClassName = @".CP" + [aView UID],
+        styleContent = @"";
+
+        if ([self hasCSSBeforeDictionary])
+        {
+            styleContent += styleClassName + @"::before { ";
+
+            [_cssBeforeDictionary enumerateKeysAndObjectsUsingBlock:function(aKey, anObject, stop)
+             {
+                 styleContent += aKey + ": " + anObject + "; ";
+             }];
+
+            styleContent += "} ";
+        }
+
+        if ([self hasCSSAfterDictionary])
+        {
+            styleContent += styleClassName + @"::after { ";
+
+            [_cssAfterDictionary enumerateKeysAndObjectsUsingBlock:function(aKey, anObject, stop)
+             {
+                 styleContent += aKey + ": " + anObject + "; ";
+             }];
+
+            styleContent += "} ";
+        }
+
+        var styleDescription = document.createTextNode(styleContent);
+
+        if (!aStyleNode)
+        {
+            aStyleNode = document.createElement("style");
+
+            aView._DOMElement.insertBefore(aStyleNode, aView._DOMElement.firstChild);
+
+            aStyleNode.appendChild(styleDescription);
+        }
+        else
+        {
+            aStyleNode.replaceChild(styleDescription, aStyleNode.firstChild);
+        }
+
+        [aView setDOMClassName:@"CP"+[aView UID]];
+    }
+    else
+    {
+        // no before/after so remove aStyleNode if existing
+
+        if (aStyleNode)
+        {
+            aView._DOMElement.removeChild(aStyleNode);
+            aStyleNode = nil;
+        }
+    }
+
+    // Return actualised values
+
+    @deref(aPreviousStateRef) = aPreviousState;
+
+    return aStyleNode;
+#endif
+}
+
+@end
+
+// MARK: -
+
 /// @cond IGNORE
-var CPColorComponentsKey    = @"CPColorComponentsKey",
-    CPColorPatternImageKey  = @"CPColorPatternImageKey";
+var CPColorComponentsKey            = @"CPColorComponentsKey",
+    CPColorPatternImageKey          = @"CPColorPatternImageKey",
+    CPColorCssDictionaryKey         = @"CPColorCssDictionaryKey",
+    CPColorCssBeforeDictionaryKey   = @"CPColorCssBeforeDictionaryKey",
+    CPColorCssAfterDictionaryKey    = @"CPColorCssAfterDictionaryKey";
 /// @endcond
 
 @implementation CPColor (CPCoding)
@@ -829,9 +1110,17 @@ var CPColorComponentsKey    = @"CPColorComponentsKey",
 - (id)initWithCoder:(CPCoder)aCoder
 {
     if ([aCoder containsValueForKey:CPColorPatternImageKey])
-        return [self _initWithPatternImage:[aCoder decodeObjectForKey:CPColorPatternImageKey]];
+        self = [self _initWithPatternImage:[aCoder decodeObjectForKey:CPColorPatternImageKey]];
+    else if ([aCoder containsValueForKey:CPColorCssDictionaryKey])
+        self = [self _initWithCSSDictionary:[aCoder decodeObjectForKey:CPColorCssDictionaryKey]
+                           beforeDictionary:[aCoder decodeObjectForKey:CPColorCssBeforeDictionaryKey]
+                            afterDictionary:[aCoder decodeObjectForKey:CPColorCssAfterDictionaryKey]];
+    else
+        self = [self _initWithRGBA:[aCoder decodeObjectForKey:CPColorComponentsKey]];
 
-    return [self _initWithRGBA:[aCoder decodeObjectForKey:CPColorComponentsKey]];
+    [self _decodeThemeObjectsWithCoder:aCoder];
+
+    return self;
 }
 
 /*!
@@ -842,8 +1131,16 @@ var CPColorComponentsKey    = @"CPColorComponentsKey",
 {
     if (_patternImage)
         [aCoder encodeObject:_patternImage forKey:CPColorPatternImageKey];
+    else if (_cssDictionary)
+    {
+        [aCoder encodeObject:_cssDictionary       forKey:CPColorCssDictionaryKey];
+        [aCoder encodeObject:_cssBeforeDictionary forKey:CPColorCssBeforeDictionaryKey];
+        [aCoder encodeObject:_cssAfterDictionary  forKey:CPColorCssAfterDictionaryKey];
+    }
     else
         [aCoder encodeObject:_components forKey:CPColorComponentsKey];
+
+    [self _encodeThemeObjectsWithCoder:aCoder];
 }
 
 @end
@@ -1180,7 +1477,8 @@ var patternColorsFromPattern = function(pattern, attributes, imageFactory)
             bottomHeight,
             centerWidthHeight,
             centerIsNil,
-            numParts;
+            numParts,
+            isVertical;
 
         // positions are mandatory
         if (pattern.indexOf("{position}") < 0)

AppKit/CPColorPanel.j

@@ -27,6 +27,9 @@
 @import "CPView.j"
 
 @class CPSlider
+@class _CPColorPanelToolbar
+@class _CPColorPanelSwatches
+@class _CPColorPanelPreview
 
 @global CPApp
 
@@ -48,6 +51,7 @@ CPColorPickerViewWidth  = 265;
 CPColorPickerViewHeight = 370;
 
 CPColorPanelColorDidChangeNotification = @"CPColorPanelColorDidChangeNotification";
+CPColorDragType = CPColorPboardType;
 
 var PREVIEW_HEIGHT = 20.0,
     TOOLBAR_HEIGHT = 32.0,
@@ -68,7 +72,6 @@ var SharedColorPanel = nil,
 */
 @implementation CPColorPanel : CPPanel
 {
-    _CPColorPanelToolbar    _toolbar;
     _CPColorPanelSwatches   _swatchView;
     _CPColorPanelPreview    _previewView;
 
@@ -127,8 +130,6 @@ var SharedColorPanel = nil,
 
     if (self)
     {
-        //[[self contentView] setBackgroundColor:[CPColor colorWithWhite:0.95 alpha:1.0]];
-
         [self setTitle:@"Color Panel"];
         [self setLevel:CPFloatingWindowLevel];
 
@@ -147,20 +148,37 @@ var SharedColorPanel = nil,
 */
 - (void)setColor:(CPColor)aColor
 {
+    if ([_color isEqual:aColor])
+        return;
+
     _color = aColor;
     [_previewView setBackgroundColor:_color];
 
-    [CPApp sendAction:@selector(changeColor:) to:nil from:self];
+    // Check if the color change originated from user interaction inside the panel itself.
+    // We only broadcast `changeColor:` if the user picked a color via the panel's UI.
+    // If an external CPColorWell called `setColor:` programmatically, broadcasting it
+    // back down the responder chain would incorrectly change the previous First Responder.
+    var currentEvent = [CPApp currentEvent],
+        isFromPanel = currentEvent && ([currentEvent window] === self);
 
-    if (_target && _action)
-        [CPApp sendAction:_action to:_target from:self];
+    if (isFromPanel)
+    {
+        // Push color via Responder Chain (targets First Responder, i.e., the active CPColorWell)
+        [CPApp sendAction:@selector(changeColor:) to:nil from:self];
+
+        if (_target && _action)
+            [CPApp sendAction:_action to:_target from:self];
+    }
 
     [[CPNotificationCenter defaultCenter]
         postNotificationName:CPColorPanelColorDidChangeNotification
                       object:self];
 
-    [_activePicker setColor:_color];
-    [_opacitySlider setFloatValue:[_color alphaComponent]];
+    if (_activePicker)
+        [_activePicker setColor:_color];
+
+    if (_opacitySlider)
+        [_opacitySlider setFloatValue:[_color alphaComponent]];
 }
 
 /*!
@@ -172,7 +190,7 @@ var SharedColorPanel = nil,
 {
     [self setColor:aColor];
 
-    if (bool)
+    if (bool && _activePicker)
         [_activePicker setColor:_color];
 }
 
@@ -330,7 +348,7 @@ var SharedColorPanel = nil,
             buttonForLater = button;
     }
 
-    // FIXME: http://280north.lighthouseapp.com/projects/13294-cappuccino/tickets/25-implement-cpbox
+    // Preview
     var previewBox = [[CPView alloc] initWithFrame:CGRectMake(76, TOOLBAR_HEIGHT + 10, CGRectGetWidth(bounds) - 86, PREVIEW_HEIGHT)];
 
     _previewView = [[_CPColorPanelPreview alloc] initWithFrame:CGRectInset([previewBox bounds], 2.0, 2.0)];
@@ -348,7 +366,7 @@ var SharedColorPanel = nil,
     [_previewLabel setTextColor:[CPColor blackColor]];
     [_previewLabel setAlignment:CPRightTextAlignment];
 
-    // FIXME: http://280north.lighthouseapp.com/projects/13294-cappuccino/tickets/25-implement-cpbox
+    // Swatches
     var swatchBox = [[CPView alloc] initWithFrame:CGRectMake(76, TOOLBAR_HEIGHT + 10 + PREVIEW_HEIGHT + 5, CGRectGetWidth(bounds) - 86, SWATCH_HEIGHT + 2.0)];
 
     [swatchBox setBackgroundColor:[CPColor colorWithWhite:0.8 alpha:1.0]];
@@ -389,8 +407,6 @@ var SharedColorPanel = nil,
     [contentView addSubview:opacityLabel];
     [contentView addSubview:_opacitySlider];
 
-    _target = nil;
-    _action = nil;
     _activePicker = nil;
 
     [_previewView setBackgroundColor:_color];
@@ -410,8 +426,6 @@ var SharedColorPanel = nil,
 @end
 
 
-CPColorDragType = "CPColorDragType";
-
 var CPColorPanelSwatchesCookie = "CPColorPanelSwatchesCookie";
 
 /* @ignore */
@@ -421,12 +435,14 @@ var CPColorPanelSwatchesCookie = "CPColorPanelSwatchesCookie";
     CPColor         _dragColor;
     CPColorPanel    _colorPanel;
     CPCookie        _swatchCookie;
+    CGPoint         _mouseDownPoint;
 }
 
 - (id)initWithFrame:(CGRect)aFrame
 {
     self = [super initWithFrame:aFrame];
 
+    _mouseDownPoint = CGPointMake(0, 0);
     [self setBackgroundColor:[CPColor grayColor]];
 
     [self registerForDraggedTypes:[CPArray arrayWithObjects:CPColorDragType]];
@@ -440,7 +456,6 @@ var CPColorPanelSwatchesCookie = "CPColorPanelSwatchesCookie";
 
     for (var i = 0; i < 50; i++)
     {
-        // FIXME: http://280north.lighthouseapp.com/projects/13294-cappuccino/tickets/25-implement-cpbox
         var view = [[CPView alloc] initWithFrame:CGRectMake(13 * i + 1, 1, 12, 12)],
             fillView = [[CPView alloc] initWithFrame:CGRectInset([view bounds], 1.0, 1.0)];
 
@@ -481,19 +496,17 @@ var CPColorPanelSwatchesCookie = "CPColorPanelSwatchesCookie";
         ];
     }
 
-    var cookieValue = eval(cookieValue),
-        result = [];
+    var cookieValue = JSON.parse(cookieValue);
 
-    for (var i = 0; i < cookieValue.length; i++)
-        result.push([CPColor colorWithHexString:cookieValue[i]]);
-
-    return result;
+    return [cookieValue arrayByApplyingBlock:function(value)
+    {
+        return [CPColor colorWithHexString:value];
+    }];
 }
 
 - (CPArray)saveColorList
 {
     var result = [];
-    // FIXME: http://280north.lighthouseapp.com/projects/13294-cappuccino/tickets/25-implement-cpbox
     for (var i = 0; i < _swatches.length; i++)
         result.push([[[_swatches[i] subviews][0] backgroundColor] hexString]);
 
@@ -520,39 +533,44 @@ var CPColorPanelSwatchesCookie = "CPColorPanelSwatchesCookie";
 
 - (void)setColor:(CPColor)aColor atIndex:(int)index
 {
-    // FIXME: http://280north.lighthouseapp.com/projects/13294-cappuccino/tickets/25-implement-cpbox
     [[_swatches[index] subviews][0] setBackgroundColor:aColor];
     [self saveColorList];
 }
 
+- (void)mouseDown:(CPEvent)anEvent
+{
+    _mouseDownPoint = [anEvent locationInWindow];
+}
+
 - (void)mouseUp:(CPEvent)anEvent
 {
     var point = [self convertPoint:[anEvent locationInWindow] fromView:nil],
         bounds = [self bounds];
 
     if (!CGRectContainsPoint(bounds, point) || point.x > [self bounds].size.width - 1 || point.x < 1)
-        return NO;
+        return;
 
     [_colorPanel setColor:[self colorAtIndex:FLOOR(point.x / 13)] updatePicker:YES];
 }
 
 - (void)mouseDragged:(CPEvent)anEvent
 {
-    var point = [self convertPoint:[anEvent locationInWindow] fromView:nil];
+    var windowPoint = [anEvent locationInWindow];
+    
+    // Prevent accidental drags from rapid clicking causing small micro-movements
+    if (ABS(windowPoint.x - _mouseDownPoint.x) < 3 && ABS(windowPoint.y - _mouseDownPoint.y) < 3)
+        return;
+
+    var point = [self convertPoint:windowPoint fromView:nil];
 
      if (point.x > [self bounds].size.width - 1 || point.x < 1)
-        return NO;
-
-    [[CPPasteboard pasteboardWithName:CPDragPboard] declareTypes:[CPArray arrayWithObject:CPColorDragType] owner:self];
+        return;
 
     var swatch = _swatches[FLOOR(point.x / 13)];
-
-    // FIXME: http://280north.lighthouseapp.com/projects/13294-cappuccino/tickets/25-implement-cpbox
     _dragColor = [[swatch subviews][0] backgroundColor];
 
     var bounds = CGRectMakeCopy([swatch bounds]);
 
-    // FIXME: http://280north.lighthouseapp.com/projects/13294-cappuccino/tickets/25-implement-cpbox
     var dragView = [[CPView alloc] initWithFrame:bounds],
         dragFillView = [[CPView alloc] initWithFrame:CGRectInset(bounds, 1.0, 1.0)];
 
@@ -561,11 +579,15 @@ var CPColorPanelSwatchesCookie = "CPColorPanelSwatchesCookie";
 
     [dragView addSubview:dragFillView];
 
+    var pasteboard = [CPPasteboard pasteboardWithName:CPDragPboard];
+    [pasteboard declareTypes:[CPArray arrayWithObject:CPColorDragType] owner:self];
+    [pasteboard setData:[CPKeyedArchiver archivedDataWithRootObject:_dragColor] forType:CPColorDragType];
+
     [self dragView:dragView
                 at:CGPointMake(point.x - bounds.size.width / 2.0, point.y - bounds.size.height / 2.0)
             offset:CGPointMake(0.0, 0.0)
              event:anEvent
-        pasteboard:nil
+        pasteboard:pasteboard
             source:self
          slideBack:YES];
 }
@@ -576,7 +598,7 @@ var CPColorPanelSwatchesCookie = "CPColorPanelSwatchesCookie";
         [aPasteboard setData:[CPKeyedArchiver archivedDataWithRootObject:_dragColor] forType:aType];
 }
 
-- (void)performDragOperation:(id /*<CPDraggingInfo>*/)aSender
+- (BOOL)performDragOperation:(id /*<CPDraggingInfo>*/)aSender
 {
     var location = [self convertPoint:[aSender draggingLocation] fromView:nil],
         pasteboard = [aSender draggingPasteboard],
@@ -586,6 +608,13 @@ var CPColorPanelSwatchesCookie = "CPColorPanelSwatchesCookie";
         return NO;
 
     [self setColor:[CPKeyedUnarchiver unarchiveObjectWithData:[pasteboard dataForType:CPColorDragType]] atIndex:FLOOR(location.x / 13)];
+    
+    return YES;
+}
+
+- (unsigned)draggingSourceOperationMaskForLocal:(BOOL)isLocal
+{
+    return CPDragOperationCopy;
 }
 
 @end
@@ -594,11 +623,13 @@ var CPColorPanelSwatchesCookie = "CPColorPanelSwatchesCookie";
 @implementation _CPColorPanelPreview : CPView
 {
     CPColorPanel    _colorPanel;
+    CGPoint         _mouseDownPoint;
 }
 
 - (id)initWithFrame:(CGRect)aFrame
 {
     self = [super initWithFrame:aFrame];
+    _mouseDownPoint = CGPointMake(0, 0);
 
     [self registerForDraggedTypes:[CPArray arrayWithObjects:CPColorDragType]];
 
@@ -615,7 +646,7 @@ var CPColorPanelSwatchesCookie = "CPColorPanelSwatchesCookie";
     return _colorPanel;
 }
 
-- (void)performDragOperation:(id /*<CPDraggingInfo>*/)aSender
+- (BOOL)performDragOperation:(id /*<CPDraggingInfo>*/)aSender
 {
     var pasteboard = [aSender draggingPasteboard];
 
@@ -624,6 +655,8 @@ var CPColorPanelSwatchesCookie = "CPColorPanelSwatchesCookie";
 
     var color = [CPKeyedUnarchiver unarchiveObjectWithData:[pasteboard dataForType:CPColorDragType]];
     [_colorPanel setColor:color updatePicker:YES];
+    
+    return YES;
 }
 
 - (BOOL)isOpaque
@@ -631,15 +664,22 @@ var CPColorPanelSwatchesCookie = "CPColorPanelSwatchesCookie";
     return YES;
 }
 
+- (void)mouseDown:(CPEvent)anEvent
+{
+    _mouseDownPoint = [anEvent locationInWindow];
+}
+
 - (void)mouseDragged:(CPEvent)anEvent
 {
-    var point = [self convertPoint:[anEvent locationInWindow] fromView:nil];
+    var windowPoint = [anEvent locationInWindow];
+    
+    if (ABS(windowPoint.x - _mouseDownPoint.x) < 3 && ABS(windowPoint.y - _mouseDownPoint.y) < 3)
+        return;
 
-    [[CPPasteboard pasteboardWithName:CPDragPboard] declareTypes:[CPColorDragType] owner:self];
+    var point = [self convertPoint:windowPoint fromView:nil];
 
     var bounds = CGRectMake(0, 0, 15, 15);
 
-    // FIXME: http://280north.lighthouseapp.com/projects/13294-cappuccino/tickets/25-implement-cpbox
     var dragView = [[CPView alloc] initWithFrame:bounds],
         dragFillView = [[CPView alloc] initWithFrame:CGRectInset(bounds, 1.0, 1.0)];
 
@@ -648,11 +688,15 @@ var CPColorPanelSwatchesCookie = "CPColorPanelSwatchesCookie";
 
     [dragView addSubview:dragFillView];
 
+    var pasteboard = [CPPasteboard pasteboardWithName:CPDragPboard];
+    [pasteboard declareTypes:[CPArray arrayWithObject:CPColorDragType] owner:self];
+    [pasteboard setData:[CPKeyedArchiver archivedDataWithRootObject:[self backgroundColor]] forType:CPColorDragType];
+
     [self dragView:dragView
                 at:CGPointMake(point.x - bounds.size.width / 2.0, point.y - bounds.size.height / 2.0)
             offset:CGPointMake(0.0, 0.0)
              event:anEvent
-        pasteboard:nil
+        pasteboard:pasteboard
             source:self
          slideBack:YES];
 }
@@ -663,6 +707,11 @@ var CPColorPanelSwatchesCookie = "CPColorPanelSwatchesCookie";
         [aPasteboard setData:[CPKeyedArchiver archivedDataWithRootObject:[self backgroundColor]] forType:aType];
 }
 
+- (unsigned)draggingSourceOperationMaskForLocal:(BOOL)isLocal
+{
+    return CPDragOperationCopy;
+}
+
 @end
 
 @import "CPColorPicker.j"

AppKit/CPColorPicker.j

@@ -25,6 +25,8 @@
 @import "CPView.j"
 
 @class CPSlider
+@class CPColorPanel
+@class __CPColorWheel
 
 @global CPColorPickerViewWidth
 @global CPColorPickerViewHeight
@@ -123,7 +125,8 @@
     _brightnessSlider = [[CPSlider alloc] initWithFrame:CGRectMake(0, (aFrame.size.height - 34), aFrame.size.width, 15)];
 
     [_brightnessSlider setValue:15.0 forThemeAttribute:@"track-width"];
-    [_brightnessSlider setValue:[CPColor colorWithPatternImage:[[CPImage alloc] initWithContentsOfFile:[[CPBundle bundleForClass:[CPColorPicker class]] pathForResource:@"brightness_bar.png"]]] forThemeAttribute:@"track-color"];
+    var brightnessImage = [[CPImage alloc] initWithContentsOfFile:[[CPBundle bundleForClass:[CPColorPicker class]] pathForResource:@"brightness_bar.png"] size:CGSizeMake(272, 20)];
+    [_brightnessSlider setValue:[CPColor colorWithPatternImage:brightnessImage] forThemeAttribute:@"track-color"];
 
     [_brightnessSlider setMinValue:0.0];
     [_brightnessSlider setMaxValue:100.0];
@@ -244,7 +247,7 @@
         _blackWheelImage = new Image();
         _blackWheelImage.src = path;
         _blackWheelImage.style.opacity = "0";
-        _blackWheelImage.style.filter = "alpha(opacity=0)"
+        _blackWheelImage.style.filter = "alpha(opacity=0)";
         _blackWheelImage.style.position = "absolute";
 
         _DOMElement.appendChild(_wheelImage);

AppKit/CPColorWell.j

@@ -25,7 +25,7 @@
 @import "CPView.j"
 @import "CPColor.j"
 @import "CPColorPanel.j"
-
+@import "CPPasteboard.j"
 
 var _CPColorWellDidBecomeExclusiveNotification = @"_CPColorWellDidBecomeExclusiveNotification";
 
@@ -39,10 +39,10 @@ var _CPColorWellDidBecomeExclusiveNotification = @"_CPColorWellDidBecomeExclusiv
 */
 @implementation CPColorWell : CPControl
 {
-    BOOL    _active;
     BOOL    _bordered;
-
     CPColor _color;
+    BOOL    _isChangingColorFromPanel; // Guard flag to prevent recursion
+    CGPoint _mouseDownPoint;
 }
 
 + (Class)_binderClassForBinding:(CPString)aBinding
@@ -77,38 +77,54 @@ var _CPColorWellDidBecomeExclusiveNotification = @"_CPColorWellDidBecomeExclusiv
     [theBinding reverseSetValueFor:@"color"];
 }
 
+- (BOOL)isFirstResponder
+{
+    return [[self window] firstResponder] === self;
+}
+
+- (BOOL)acceptsFirstResponder
+{
+    return [self isEnabled];
+}
+
+- (void)activate:(BOOL)shouldBeExclusive
+{
+    [[self window] makeFirstResponder:self];
+    [[CPColorPanel sharedColorPanel] orderFront:self];
+}
+
+- (BOOL)isActive
+{
+    return [self isFirstResponder] && [self isEnabled];
+}
+
+/*!
+    Deactivates the color well.
+*/
+- (void)deactivate
+{
+    if ([self isFirstResponder])
+        [[self window] makeFirstResponder:nil];
+}
+
 - (id)initWithFrame:(CGRect)aFrame
 {
     self = [super initWithFrame:aFrame];
 
     if (self)
     {
-        _active = NO;
         _color = [CPColor whiteColor];
+        _mouseDownPoint = CGPointMakeZero();
         [self setBordered:YES];
-
-        [self _registerForNotifications];
+        
+        [self registerForDraggedTypes:[CPArray arrayWithObject:CPColorPboardType]];
     }
 
     return self;
 }
 
-- (void)_registerForNotifications
-{
-    var defaultCenter = [CPNotificationCenter defaultCenter];
-
-    [defaultCenter
-        addObserver:self
-           selector:@selector(colorWellDidBecomeExclusive:)
-               name:_CPColorWellDidBecomeExclusiveNotification
-             object:nil];
-
-    [defaultCenter
-        addObserver:self
-           selector:@selector(colorPanelWillClose:)
-               name:CPWindowWillCloseNotification
-             object:[CPColorPanel sharedColorPanel]];
-}
+// MARK: -
+// MARK: Draw
 
 /*!
     Sets whether the color well is bordered.
@@ -129,7 +145,8 @@ var _CPColorWellDidBecomeExclusiveNotification = @"_CPColorWellDidBecomeExclusiv
     return [self hasThemeState:CPThemeStateBordered];
 }
 
-// Managing Color From Color Wells
+// MARK: -
+// MARK: Managing Color
 
 /*!
     Returns the color well's current color.
@@ -144,12 +161,17 @@ var _CPColorWellDidBecomeExclusiveNotification = @"_CPColorWellDidBecomeExclusiv
 */
 - (void)setColor:(CPColor)aColor
 {
-    if (_color == aColor)
+    if ([_color isEqual:aColor])
         return;
 
     _color = aColor;
 
     [self setNeedsLayout];
+    
+    // Only push back to the panel if we initiated the change (not if the panel pushed it to us)
+    // AND if we are the current focus.
+    if (!_isChangingColorFromPanel && [self isFirstResponder])
+        [[CPColorPanel sharedColorPanel] setColor:_color];
 }
 
 /*!
@@ -161,94 +183,175 @@ var _CPColorWellDidBecomeExclusiveNotification = @"_CPColorWellDidBecomeExclusiv
     [self setColor:[aSender color]];
 }
 
-// Activating and Deactivating Color Wells
+/*!
+    Standard action method sent by CPColorPanel via the Responder Chain.
+*/
+- (void)changeColor:(id)aSender
+{
+    if ([aSender isKindOfClass:[CPColorPanel class]])
+    {
+        _isChangingColorFromPanel = YES;
+        [self setColor:[aSender color]];
+        _isChangingColorFromPanel = NO;
+        
+        // Forward the action to our target (e.g. controller)
+        [self sendAction:[self action] to:[self target]];
+    }
+}
+
+// MARK: -
+// MARK: Activating and Deactivating
+
 /*!
     Activates the color well, displays the color panel, and makes the panel's current color the same as its own.
     If exclusive is \c YES, deactivates any other CPColorWells. \c NO, keeps them active.
     @param shouldBeExclusive whether other color wells should be deactivated.
 */
-- (void)activate:(BOOL)shouldBeExclusive
+- (BOOL)becomeFirstResponder
 {
-    if (shouldBeExclusive)
-        // FIXME: make this queue!
-        [[CPNotificationCenter defaultCenter]
-            postNotificationName:_CPColorWellDidBecomeExclusiveNotification
-                          object:self];
+    [self setThemeState:CPThemeStateFirstResponder];
+    
+    var panel = [CPColorPanel sharedColorPanel];
+
+    // EXPLICITLY set ourselves as the target.
+    // This ensures that when the user clicks the panel (making Panel key),
+    // the panel still knows to send messages back to us.
+    [panel setTarget:self];
+    [panel setAction:@selector(changeColor:)];
+
+    // Sync panel to our current color
+    [panel setColor:_color];
 
 
-    if ([self isActive])
-        return;
-
-    _active = YES;
-
-    [[CPNotificationCenter defaultCenter]
-        addObserver:self
-           selector:@selector(colorPanelDidChangeColor:)
-               name:CPColorPanelColorDidChangeNotification
-             object:[CPColorPanel sharedColorPanel]];
-}
-
-/*!
-    Deactivates the color well.
-*/
-- (void)deactivate
-{
-    if (![self isActive])
-        return;
-
-    _active = NO;
-
-    [[CPNotificationCenter defaultCenter]
-        removeObserver:self
-                  name:CPColorPanelColorDidChangeNotification
-                object:[CPColorPanel sharedColorPanel]];
-}
-
-/*!
-    Returns \c YES if the color well is active.
-*/
-- (BOOL)isActive
-{
-    return _active;
-}
-
-- (void)colorPanelDidChangeColor:(CPNotification)aNotification
-{
-    [self takeColorFrom:[aNotification object]];
-
-    [self sendAction:[self action] to:[self target]];
-}
-
-- (void)colorWellDidBecomeExclusive:(CPNotification)aNotification
-{
-    if (self != [aNotification object])
-        [self deactivate];
-}
-
-- (void)colorPanelWillClose:(CPNotification)aNotification
-{
-    [self deactivate];
-}
-
-- (void)stopTracking:(CGPoint)lastPoint at:(CGPoint)aPoint mouseIsUp:(BOOL)mouseIsUp
-{
-    [self highlight:NO];
-
-    if (!mouseIsUp || !CGRectContainsPoint([self bounds], aPoint) || ![self isEnabled])
+    [[CPNotificationCenter defaultCenter] postNotificationName:_CPColorWellDidBecomeExclusiveNotification object:self];
+    
+    return YES;
+}
+
+- (BOOL)resignFirstResponder
+{
+    [self unsetThemeState:CPThemeStateFirstResponder];
+    
+    var panel = [CPColorPanel sharedColorPanel];
+
+    // Clean up if we were the target
+    if ([panel target] == self)
+        [panel setTarget:nil];
+        
+    return YES;
+}
+
+// MARK: -
+// MARK: Event Handling
+
+- (void)mouseDown:(CPEvent)anEvent
+{
+    if (![self isEnabled])
         return;
 
+    _mouseDownPoint = [anEvent locationInWindow];
     [self activate:YES];
-
-    var colorPanel = [CPColorPanel sharedColorPanel];
-
-    [colorPanel setColor:_color];
-    [colorPanel orderFront:self];
 }
 
+- (void)mouseDragged:(CPEvent)anEvent
+{
+    if (![self isEnabled])
+        return;
+        
+    var windowPoint = [anEvent locationInWindow];
+    
+    // Prevent accidental drags from rapid clicking causing small micro-movements
+    if (ABS(windowPoint.x - _mouseDownPoint.x) < 3 && ABS(windowPoint.y - _mouseDownPoint.y) < 3)
+        return;
+
+    var bounds = CGRectMake(0, 0, 15, 15);
+    var dragView = [[CPView alloc] initWithFrame:bounds],
+        dragFillView = [[CPView alloc] initWithFrame:CGRectInset(bounds, 1.0, 1.0)];
+
+    [dragView setBackgroundColor:[CPColor blackColor]];
+    [dragFillView setBackgroundColor:_color];
+
+    [dragView addSubview:dragFillView];
+
+    var pasteboard = [CPPasteboard pasteboardWithName:CPDragPboard];
+    [pasteboard declareTypes:[CPArray arrayWithObject:CPColorPboardType] owner:self];
+    [pasteboard setData:[CPKeyedArchiver archivedDataWithRootObject:_color] forType:CPColorPboardType];
+
+    var point = [self convertPoint:windowPoint fromView:nil];
+
+    [self dragView:dragView
+                at:CGPointMake(point.x - bounds.size.width / 2.0, point.y - bounds.size.height / 2.0)
+            offset:CGPointMake(0.0, 0.0)
+             event:anEvent
+        pasteboard:pasteboard
+            source:self
+         slideBack:YES];
+}
+
+
+// MARK: -
+// MARK: Drag and Drop
+
+- (void)draggingEntered:(id)sender
+{
+    var pasteboard = [sender draggingPasteboard];
+    
+    if ([[pasteboard types] containsObject:CPColorPboardType])
+    {
+        [self setThemeState:CPThemeStateHighlighted];
+        return CPDragOperationCopy;
+    }
+    
+    return CPDragOperationNone;
+}
+
+- (void)draggingExited:(id)sender
+{
+    [self unsetThemeState:CPThemeStateHighlighted];
+}
+
+- (BOOL)performDragOperation:(id)sender
+{
+    var pasteboard = [sender draggingPasteboard];
+    
+    if ([[pasteboard types] containsObject:CPColorPboardType])
+    {
+        var data = [pasteboard dataForType:CPColorPboardType],
+            newColor = [CPKeyedUnarchiver unarchiveObjectWithData:data];
+            
+        if (newColor && [newColor isKindOfClass:[CPColor class]])
+        {
+            [self setColor:newColor];
+            [self sendAction:[self action] to:[self target]];
+            
+            // Activate nicely after drop
+            [self activate:YES];
+            [self unsetThemeState:CPThemeStateHighlighted];
+            
+            return YES;
+        }
+    }
+    
+    return NO;
+}
+
+- (void)pasteboard:(CPPasteboard)aPasteboard provideDataForType:(CPString)aType
+{
+    if (aType == CPColorPboardType)
+        [aPasteboard setData:[CPKeyedArchiver archivedDataWithRootObject:_color] forType:aType];
+}
+
+- (unsigned)draggingSourceOperationMaskForLocal:(BOOL)isLocal
+{
+    return CPDragOperationCopy;
+}
+
+// MARK: -
+// MARK: Layout
+
 - (CGRect)contentRectForBounds:(CGRect)bounds
 {
     var contentInset = [self currentValueForThemeAttribute:@"content-inset"];
-
     return CGRectInsetByInset(bounds, contentInset);
 }
 
@@ -302,7 +405,6 @@ var _CPColorWellDidBecomeExclusiveNotification = @"_CPColorWellDidBecomeExclusiv
                                              positioned:CPWindowAbove
                         relativeToEphemeralSubviewNamed:@"bezel-view"];
 
-
     [contentView setBackgroundColor:_color];
 
     var contentBorderView = [self layoutEphemeralSubviewNamed:@"content-border-view"
@@ -360,11 +462,9 @@ var CPColorWellColorKey     = "CPColorWellColorKey",
 
     if (self)
     {
-        _active = NO;
         _color = [aCoder decodeObjectForKey:CPColorWellColorKey];
         [self setBordered:[aCoder decodeBoolForKey:CPColorWellBorderedKey]];
-
-        [self _registerForNotifications];
+        [self registerForDraggedTypes:[CPArray arrayWithObject:CPColorPboardType]];
     }
 
     return self;

AppKit/CPComboBox.j

@@ -25,6 +25,27 @@
 @import "_CPPopUpList.j"
 
 
+// TODO : should conform to protocol CPTextFieldDelegate
+@protocol CPComboBoxDelegate <CPObject>
+
+@optional
+- (void)comboBoxSelectionIsChanging:(CPNotification)aNotification;
+- (void)comboBoxSelectionDidChange:(CPNotification)aNotification;
+- (void)comboBoxWillPopUp:(CPNotification)aNotification;
+- (void)comboBoxWillDismiss:(CPNotification)aNotification;
+
+@end
+
+@protocol CPComboBoxDataSource <CPObject>
+
+@optional
+- (CPString)comboBox:(CPComboBox)aComboBox completedString:(CPString)uncompletedString;
+- (id)comboBox:(CPComboBox)aComboBox objectValueForItemAtIndex:(int)index;
+- (int)comboBox:(CPComboBox)aComboBox indexOfItemWithStringValue:(CPString)stringValue;
+- (int)numberOfItemsInComboBox:(CPComboBox)aComboBox;
+
+@end
+
 CPComboBoxSelectionDidChangeNotification  = @"CPComboBoxSelectionDidChangeNotification";
 CPComboBoxSelectionIsChangingNotification = @"CPComboBoxSelectionIsChangingNotification";
 CPComboBoxWillDismissNotification         = @"CPComboBoxWillDismissNotification";
@@ -32,6 +53,11 @@ CPComboBoxWillPopUpNotification           = @"CPComboBoxWillPopUpNotification";
 
 CPComboBoxStateButtonBordered = CPThemeState("button-bordered");
 
+var CPComboBoxDelegate_comboBoxSelectionIsChanging_ = 1 << 0,
+    CPComboBoxDelegate_comboBoxSelectionDidChange_  = 1 << 1,
+    CPComboBoxDelegate_comboBoxWillPopUp_           = 1 << 2,
+    CPComboBoxDelegate_comboBoxWillDismiss_         = 1 << 3;
+
 var CPComboBoxTextSubview = @"text",
     CPComboBoxButtonSubview = @"button",
     CPComboBoxDefaultNumberOfVisibleItems = 5,
@@ -40,17 +66,20 @@ var CPComboBoxTextSubview = @"text",
 
 @implementation CPComboBox : CPTextField
 {
-    CPArray                 _items;
-    _CPPopUpList            _listDelegate;
-    CPComboBoxDataSource    _dataSource;
-    BOOL                    _usesDataSource;
-    BOOL                    _completes;
-    BOOL                    _canComplete;
-    int                     _numberOfVisibleItems;
-    BOOL                    _forceSelection;
-    BOOL                    _hasVerticalScroller;
-    CPString                _selectedStringValue;
-    BOOL                    _popUpButtonCausedResign;
+    BOOL                        _canComplete;
+    BOOL                        _completes;
+    BOOL                        _forceSelection;
+    BOOL                        _hasVerticalScroller;
+    BOOL                        _popUpButtonCausedResign;
+    BOOL                        _usesDataSource;
+    CGSize                      _intercellSpacing;
+    CPArray                     _items;
+    id <CPComboBoxDataSource>   _dataSource;
+    CPInteger                   _implementedDelegateComboBoxMethods;
+    CPString                    _selectedStringValue;
+    float                       _itemHeight;
+    int                         _numberOfVisibleItems;
+    _CPPopUpList                _listDelegate;
 }
 
 + (CPString)defaultThemeClass
@@ -104,7 +133,7 @@ var CPComboBoxTextSubview = @"text",
     [self setThemeState:CPComboBoxStateButtonBordered];
 }
 
-#pragma mark Setting Display Attributes
+// MARK: Setting Display Attributes
 
 - (BOOL)hasVerticalScroller
 {
@@ -119,7 +148,9 @@ var CPComboBoxTextSubview = @"text",
         return;
 
     _hasVerticalScroller = flag;
-    [[_listDelegate scrollView] setHasVerticalScroller:flag];
+
+    if (_listDelegate)
+        [[_listDelegate scrollView] setHasVerticalScroller:_hasVerticalScroller];
 }
 
 - (CGSize)intercellSpacing
@@ -129,7 +160,13 @@ var CPComboBoxTextSubview = @"text",
 
 - (void)setIntercellSpacing:(CGSize)aSize
 {
-    [[_listDelegate tableView] setIntercellSpacing:aSize];
+    if (_intercellSpacing && CGSizeEqualToSize(aSize, _intercellSpacing))
+        return;
+
+    _intercellSpacing = aSize;
+
+    if (_listDelegate)
+        [[_listDelegate tableView] setIntercellSpacing:_intercellSpacing];
 }
 
 - (BOOL)isButtonBordered
@@ -152,10 +189,18 @@ var CPComboBoxTextSubview = @"text",
 
 - (void)setItemHeight:(float)itemHeight
 {
-    [[_listDelegate tableView] setRowHeight:itemHeight];
+    if (itemHeight === _itemHeight)
+        return;
 
-    // FIXME: This shouldn't be necessary, but CPTableView does not tile after setRowHeight
-    [[_listDelegate tableView] reloadData];
+    _itemHeight = itemHeight;
+
+    if (_listDelegate)
+    {
+        [[_listDelegate tableView] setRowHeight:_itemHeight];
+
+        // FIXME: This shouldn't be necessary, but CPTableView does not tile after setRowHeight
+        [[_listDelegate tableView] reloadData];
+    }
 }
 
 - (int)numberOfVisibleItems
@@ -169,9 +214,9 @@ var CPComboBoxTextSubview = @"text",
     _numberOfVisibleItems = MAX(visibleItems, 1);
 }
 
-#pragma mark Setting a Delegate
+// MARK: Setting a Delegate
 
-- (id /*< CPComboBoxDelegate >*/)delegate
+- (id <CPComboBoxDelegate>)delegate
 {
     return [super delegate];
 }
@@ -182,56 +227,36 @@ var CPComboBoxTextSubview = @"text",
     protocol, in actual fact it doesn't. Also note that the same
     delegate may conform to the NSTextFieldDelegate protocol.
 */
-- (void)setDelegate:(id /*< CPComboBoxDelegate >*/)aDelegate
+- (void)setDelegate:(id <CPComboBoxDelegate>)aDelegate
 {
     var delegate = [self delegate];
 
     if (aDelegate === delegate)
         return;
 
-    var defaultCenter = [CPNotificationCenter defaultCenter];
-
-    if (delegate)
-    {
-        [defaultCenter removeObserver:delegate name:CPComboBoxSelectionIsChangingNotification object:self];
-        [defaultCenter removeObserver:delegate name:CPComboBoxSelectionDidChangeNotification object:self];
-        [defaultCenter removeObserver:delegate name:CPComboBoxWillDismissNotification object:self];
-        [defaultCenter removeObserver:delegate name:CPComboBoxWillPopUpNotification object:self];
-    }
+    _implementedDelegateComboBoxMethods = 0;
 
     if (aDelegate)
     {
         if ([aDelegate respondsToSelector:@selector(comboBoxSelectionIsChanging:)])
-            [defaultCenter addObserver:delegate
-                              selector:@selector(comboBoxSelectionIsChanging:)
-                                  name:CPComboBoxSelectionIsChangingNotification
-                                object:self];
+            _implementedDelegateComboBoxMethods |= CPComboBoxDelegate_comboBoxSelectionIsChanging_;
 
         if ([aDelegate respondsToSelector:@selector(comboBoxSelectionDidChange:)])
-            [defaultCenter addObserver:delegate
-                              selector:@selector(comboBoxSelectionDidChange:)
-                                  name:CPComboBoxSelectionDidChangeNotification
-                                object:self];
+            _implementedDelegateComboBoxMethods |= CPComboBoxDelegate_comboBoxSelectionDidChange_;
 
         if ([aDelegate respondsToSelector:@selector(comboBoxWillPopUp:)])
-            [defaultCenter addObserver:delegate
-                              selector:@selector(comboBoxWillPopUp:)
-                                  name:CPComboBoxWillPopUpNotification
-                                object:self];
+            _implementedDelegateComboBoxMethods |= CPComboBoxDelegate_comboBoxWillPopUp_;
 
         if ([aDelegate respondsToSelector:@selector(comboBoxWillDismiss:)])
-            [defaultCenter addObserver:delegate
-                              selector:@selector(comboBoxWillDissmis:)
-                                  name:CPComboBoxWillDismissNotification
-                                object:self];
+            _implementedDelegateComboBoxMethods |= CPComboBoxDelegate_comboBoxWillDismiss_;
     }
 
     [super setDelegate:aDelegate];
 }
 
-#pragma mark Setting a Data Source
+// MARK: Setting a Data Source
 
-- (id /*< CPComboBoxDataSource >*/)dataSource
+- (id <CPComboBoxDataSource>)dataSource
 {
     if (!_usesDataSource)
         [self _dataSourceWarningForMethod:_cmd condition:NO];
@@ -239,10 +264,12 @@ var CPComboBoxTextSubview = @"text",
     return _dataSource;
 }
 
-- (void)setDataSource:(id /*< CPComboBoxDataSource >*/)aSource
+- (void)setDataSource:(id <CPComboBoxDataSource>)aSource
 {
     if (!_usesDataSource)
+    {
         [self _dataSourceWarningForMethod:_cmd condition:NO];
+    }
     else if (_dataSource !== aSource)
     {
         if (![aSource respondsToSelector:@selector(numberOfItemsInComboBox:)] ||
@@ -251,7 +278,9 @@ var CPComboBoxTextSubview = @"text",
             CPLog.warn("Illegal %s data source (%s). Must implement numberOfItemsInComboBox: and comboBox:objectValueForItemAtIndex:", [self className], [aSource description]);
         }
         else
+        {
             _dataSource = aSource;
+        }
     }
 }
 
@@ -276,7 +305,7 @@ var CPComboBoxTextSubview = @"text",
     [self reloadData];
 }
 
-#pragma mark Working with an Internal List
+// MARK: Working with an Internal List
 
 - (void)addItemsWithObjectValues:(CPArray)objects
 {
@@ -349,7 +378,7 @@ var CPComboBoxTextSubview = @"text",
         return _items.length;
 }
 
-#pragma mark Manipulating the Displayed List
+// MARK: Manipulating the Displayed List
 
 /*!
     Returns the delegate to be used when creating the pop up list.
@@ -369,49 +398,57 @@ var CPComboBoxTextSubview = @"text",
     if (_listDelegate === aDelegate)
         return;
 
-    var defaultCenter = [CPNotificationCenter defaultCenter];
-
-    if (_listDelegate)
-    {
-        [defaultCenter removeObserver:self name:_CPPopUpListWillPopUpNotification object:_listDelegate];
-        [defaultCenter removeObserver:self name:_CPPopUpListWillDismissNotification object:_listDelegate];
-        [defaultCenter removeObserver:self name:_CPPopUpListDidDismissNotification object:_listDelegate];
-        [defaultCenter removeObserver:self name:_CPPopUpListItemWasClickedNotification object:_listDelegate];
-
-        var oldTableView = [_listDelegate tableView];
-
-        if (oldTableView)
-        {
-            [defaultCenter removeObserver:self name:CPTableViewSelectionIsChangingNotification object:oldTableView];
-            [defaultCenter removeObserver:self name:CPTableViewSelectionDidChangeNotification object:oldTableView];
-        }
-    }
+    [self _removeObserversForListDelegate:_listDelegate];
 
     _listDelegate = aDelegate;
 
+    // We only add the observers if the CPComboBox is displayed
+    if ([self window])
+        [self _addObserversForListDelegate:_listDelegate]
+
+    // Apply our text style to the list
+    [_listDelegate setFont:[self font]];
+    [_listDelegate setAlignment:[self alignment]];
+
+    [[_listDelegate scrollView] setHasVerticalScroller:_hasVerticalScroller];
+
+    if (_intercellSpacing)
+        [[_listDelegate tableView] setIntercellSpacing:_intercellSpacing];
+
+    if (_itemHeight)
+        [[_listDelegate tableView] setRowHeight:_itemHeight];
+}
+
+- (void)_addObserversForListDelegate:(_CPPopUpList)aDelegate
+{
+    if (!aDelegate)
+        return;
+
+    var defaultCenter = [CPNotificationCenter defaultCenter];
+
     [defaultCenter addObserver:self
                       selector:@selector(comboBoxWillPopUp:)
                           name:_CPPopUpListWillPopUpNotification
-                        object:_listDelegate];
+                        object:aDelegate];
 
     [defaultCenter addObserver:self
                       selector:@selector(comboBoxWillDismiss:)
                           name:_CPPopUpListWillDismissNotification
-                        object:_listDelegate];
+                        object:aDelegate];
 
     [defaultCenter addObserver:self
                       selector:@selector(listDidDismiss:)
                           name:_CPPopUpListDidDismissNotification
-                        object:_listDelegate];
+                        object:aDelegate];
 
     [defaultCenter addObserver:self
                       selector:@selector(itemWasClicked:)
                           name:_CPPopUpListItemWasClickedNotification
-                        object:_listDelegate];
+                        object:aDelegate];
 
-    [[_listDelegate scrollView] setHasVerticalScroller:_hasVerticalScroller];
+    [[aDelegate scrollView] setHasVerticalScroller:_hasVerticalScroller];
 
-    var tableView = [_listDelegate tableView];
+    var tableView = [aDelegate tableView];
 
     [defaultCenter addObserver:self
                       selector:@selector(comboBoxSelectionIsChanging:)
@@ -422,10 +459,27 @@ var CPComboBoxTextSubview = @"text",
                       selector:@selector(comboBoxSelectionDidChange:)
                           name:CPTableViewSelectionDidChangeNotification
                         object:tableView];
+}
 
-    // Apply our text style to the list
-    [_listDelegate setFont:[self font]];
-    [_listDelegate setAlignment:[self alignment]];
+- (void)_removeObserversForListDelegate:(_CPPopUpList)aDelegate
+{
+    if (!aDelegate)
+        return;
+
+    var defaultCenter = [CPNotificationCenter defaultCenter];
+
+    [defaultCenter removeObserver:self name:_CPPopUpListWillPopUpNotification object:aDelegate];
+    [defaultCenter removeObserver:self name:_CPPopUpListWillDismissNotification object:aDelegate];
+    [defaultCenter removeObserver:self name:_CPPopUpListDidDismissNotification object:aDelegate];
+    [defaultCenter removeObserver:self name:_CPPopUpListItemWasClickedNotification object:aDelegate];
+
+    var oldTableView = [aDelegate tableView];
+
+    if (oldTableView)
+    {
+        [defaultCenter removeObserver:self name:CPTableViewSelectionIsChangingNotification object:oldTableView];
+        [defaultCenter removeObserver:self name:CPTableViewSelectionDidChangeNotification object:oldTableView];
+    }
 }
 
 - (int)indexOfItemWithObjectValue:(id)anObject
@@ -470,8 +524,6 @@ var CPComboBoxTextSubview = @"text",
     if (!_listDelegate)
         [self setListDelegate:[[_CPPopUpList alloc] initWithDataSource:self]];
 
-    [self _selectMatchingItem];
-
     // Note the offset here is 1 less than the focus ring width because the outer edge
     // of the focus ring is very transparent and it looks better if the list is closer.
     if (CPComboBoxFocusRingWidth < 0)
@@ -482,6 +534,7 @@ var CPComboBoxTextSubview = @"text",
     }
 
     [_listDelegate popUpRelativeToRect:[self _borderFrame] view:self offset:CPComboBoxFocusRingWidth - 1];
+    [self _selectMatchingItem];
 }
 
 /*! @ignore */
@@ -511,7 +564,7 @@ var CPComboBoxTextSubview = @"text",
 
     var selectedStringValue = [_listDelegate selectedStringValue];
 
-    if (selectedStringValue === nil)
+    if (selectedStringValue == nil)
         return NO;
     else
         _selectedStringValue = selectedStringValue;
@@ -541,7 +594,7 @@ var CPComboBoxTextSubview = @"text",
     [self sendAction:[self action] to:[self target]];
 }
 
-#pragma mark Manipulating the Selection
+// MARK: Manipulating the Selection
 
 - (void)deselectItemAtIndex:(int)index
 {
@@ -593,7 +646,7 @@ var CPComboBoxTextSubview = @"text",
         [self selectItemAtIndex:index];
 }
 
-#pragma mark Completing the Text Field
+// MARK: Completing the Text Field
 
 - (BOOL)completes
 {
@@ -640,7 +693,7 @@ var CPComboBoxTextSubview = @"text",
     _forceSelection = !!flag;
 }
 
-#pragma mark CPTextField Delegate Methods and Overrides
+// MARK: CPTextField Delegate Methods and Overrides
 
 /*! @ignore */
 - (BOOL)sendAction:(SEL)anAction to:(id)anObject
@@ -790,7 +843,17 @@ var CPComboBoxTextSubview = @"text",
         // In FireFox this needs to be done in setTimeout, otherwise there is no caret
         // We have to save the input element now, when we lose focus it will change.
         var element = [self _inputElement];
-        window.setTimeout(function() { element.focus(); }, 0);
+
+        [[CPRunLoop mainRunLoop] performBlock:function()
+        {
+            // This will prevent to jump to the focused element
+            var previousScrollingOrigin = [self _scrollToVisibleRectAndReturnPreviousOrigin];
+
+            element.focus();
+
+            [self _restorePreviousScrollingOrigin:previousScrollingOrigin];
+
+        } argument:nil order:0 modes:[CPDefaultRunLoopMode]];
 #endif
 
         return NO;
@@ -817,16 +880,20 @@ var CPComboBoxTextSubview = @"text",
 - (void)setFont:(CPFont)aFont
 {
     [super setFont:aFont];
-    [_listDelegate setFont:aFont];
+
+    if (_listDelegate)
+        [_listDelegate setFont:aFont];
 }
 
 - (void)setAlignment:(CPTextAlignment)alignment
 {
     [super setAlignment:alignment];
-    [_listDelegate setAlignment:alignment];
+
+    if (_listDelegate)
+        [_listDelegate setAlignment:alignment];
 }
 
-#pragma mark Pop Up Button Layout
+// MARK: Pop Up Button Layout
 
 - (CGRect)popupButtonRectForBounds:(CGRect)bounds
 {
@@ -871,7 +938,7 @@ var CPComboBoxTextSubview = @"text",
                             relativeToEphemeralSubviewNamed:@"content-view"];
 }
 
-#pragma mark Internal Helpers
+// MARK: Internal Helpers
 
 /*! @ignore */
 - (void)_dataSourceWarningForMethod:(SEL)cmd condition:(CPString)flag
@@ -894,7 +961,9 @@ var CPComboBoxTextSubview = @"text",
             index = [_dataSource comboBox:self indexOfItemWithStringValue:stringValue]
     }
     else
+    {
         index = [self indexOfItemWithObjectValue:stringValue];
+    }
 
     [_listDelegate selectRow:index];
 
@@ -946,6 +1015,28 @@ var CPComboBoxTextSubview = @"text",
     }
 }
 
+
+// MARK: -
+// MARK: Observers method
+
+- (void)_addObservers
+{
+    if (_isObserving)
+        return;
+
+    [super _addObservers];
+    [self _addObserversForListDelegate:_listDelegate];
+}
+
+- (void)_removeObservers
+{
+    if (!_isObserving)
+        return;
+
+    [super _removeObservers];
+    [self _removeObserversForListDelegate:_listDelegate];
+}
+
 @end
 
 @implementation CPComboBox (CPComboBoxDelegate)
@@ -953,24 +1044,36 @@ var CPComboBoxTextSubview = @"text",
 /*! @ignore */
 - (void)comboBoxSelectionIsChanging:(CPNotification)aNotification
 {
+    if (_implementedDelegateComboBoxMethods & CPComboBoxDelegate_comboBoxSelectionIsChanging_)
+        [_delegate comboBoxSelectionIsChanging:[[CPNotification alloc] initWithName:CPComboBoxSelectionIsChangingNotification object:self userInfo:nil]];
+
     [[CPNotificationCenter defaultCenter] postNotificationName:CPComboBoxSelectionIsChangingNotification object:self];
 }
 
 /*! @ignore */
 - (void)comboBoxSelectionDidChange:(CPNotification)aNotification
 {
+    if (_implementedDelegateComboBoxMethods & CPComboBoxDelegate_comboBoxSelectionDidChange_)
+        [_delegate comboBoxSelectionDidChange:[[CPNotification alloc] initWithName:CPComboBoxSelectionDidChangeNotification object:self userInfo:nil]];
+
     [[CPNotificationCenter defaultCenter] postNotificationName:CPComboBoxSelectionDidChangeNotification object:self];
 }
 
 /*! @ignore */
 - (void)comboBoxWillPopUp:(CPNotification)aNotification
 {
+    if (_implementedDelegateComboBoxMethods & CPComboBoxDelegate_comboBoxWillPopUp_)
+        [_delegate comboBoxWillPopUp:[[CPNotification alloc] initWithName:CPComboBoxWillPopUpNotification object:self userInfo:nil]];
+
     [[CPNotificationCenter defaultCenter] postNotificationName:CPComboBoxWillPopUpNotification object:self];
 }
 
 /*! @ignore */
 - (void)comboBoxWillDismiss:(CPNotification)aNotification
 {
+    if (_implementedDelegateComboBoxMethods & CPComboBoxDelegate_comboBoxWillDismiss_)
+        [_delegate comboBoxWillDismiss:[[CPNotification alloc] initWithName:CPComboBoxWillDismissNotification object:self userInfo:nil]];
+
     [[CPNotificationCenter defaultCenter] postNotificationName:CPComboBoxWillDismissNotification object:self];
 }
 
@@ -1039,11 +1142,9 @@ var CPComboBoxTextSubview = @"text",
     // Directly nuke _items, [_items removeAll] will trigger an extra call to setContent
     _items = [];
 
-    var values = [];
-
-    [anArray enumerateObjectsUsingBlock:function(object)
+    var values = [anArray arrayByApplyingBlock:function(object)
     {
-        values.push([object description]);
+        return [object description];
     }];
 
     [self addItemsWithObjectValues:values];

AppKit/CPCompatibility.j

@@ -26,11 +26,13 @@
 
 // Browser Engines
 CPUnknownBrowserEngine                  = 0;
-CPGeckoBrowserEngine                    = 1;
-CPInternetExplorerBrowserEngine         = 2;
-CPKHTMLBrowserEngine                    = 3;
-CPOperaBrowserEngine                    = 4;
-CPWebKitBrowserEngine                   = 5;
+CPGeckoBrowserEngine                    = 1 << 0;
+CPInternetExplorerBrowserEngine         = 1 << 1;
+CPKHTMLBrowserEngine                    = 1 << 2;
+CPOperaBrowserEngine                    = 1 << 3;
+CPWebKitBrowserEngine                   = 1 << 4;  // Safari + Chrome
+CPBlinkBrowserEngine                    = 1 << 5;  // Recent Chrome
+CPEdgeBrowserEngine                     = 1 << 6;
 
 // Operating Systems
 CPMacOperatingSystem                    = 0;
@@ -78,18 +80,30 @@ CPInputOnInputEventFeature              = 30;
 
 CPFileAPIFeature                        = 31;
 
+CPAltEnterTextAreaFeature               = 32;
 
+CPCSSAnimationFeature                   = 33;
 
+CPBackspaceTriggersPageBack             = 34;
 /*
     When an absolutely positioned div (CPView) with an absolutely positioned canvas in it (CPView with drawRect:) moves things on top of the canvas (subviews) don't redraw correctly. E.g. if you have a bunch of text fields in a CPBox in a sheet which animates in, some of the text fields might not be visible because the CPBox has a canvas at the bottom and the box moved form offscreen to onscreen. This bug is probably very related: https://bugs.webkit.org/show_bug.cgi?id=67203
-*/
+ */
 CPCanvasParentDrawErrorsOnMovementBug   = 1 << 0;
 
 // The paste event is only sent if an input or textarea has focus.
-CPJavaScriptPasteRequiresEditableTarget   = 1 << 1;
+CPJavaScriptPasteRequiresEditableTarget = 1 << 1;
 // Redirecting the focus of the browser on keydown to an input for Cmd-V or Ctrl-V makes the paste fail.
 CPJavaScriptPasteCantRefocus            = 1 << 2;
 
+/*
+   Safari calculates incorrect text size unless you set the canvas font even if it is already set
+       You can see the bug after disabling the workaround and opening any panel while typing.
+       You can use the font panel in the manual test for CPTextView.
+       Look out for a displaced cursor, i.e. after typing letters of small width, such as the 'i'.
+       https://bugs.webkit.org/show_bug.cgi?id=150224
+ */
+CPTextSizingAlwaysNeedsSetFontBug       = 1 << 3;
+
 
 var USER_AGENT                          = "",
     PLATFORM_ENGINE                     = CPUnknownBrowserEngine,
@@ -100,6 +114,7 @@ var USER_AGENT                          = "",
 // default these features to true
 PLATFORM_FEATURES[CPInputTypeCanBeChangedFeature] = YES;
 PLATFORM_FEATURES[CPInputSetFontOutsideOfDOM] = YES;
+PLATFORM_FEATURES[CPAltEnterTextAreaFeature] = YES;
 
 if (typeof window !== "undefined" && typeof window.navigator !== "undefined")
     USER_AGENT = window.navigator.userAgent;
@@ -107,15 +122,15 @@ if (typeof window !== "undefined" && typeof window.navigator !== "undefined")
 // Opera
 if (typeof window !== "undefined" && window.opera)
 {
-    PLATFORM_ENGINE = CPOperaBrowserEngine;
+    PLATFORM_ENGINE |= CPOperaBrowserEngine;
 
     PLATFORM_FEATURES[CPJavaScriptCanvasDrawFeature] = YES;
 }
 
 // Internet Explorer
-else if (typeof window !== "undefined" && window.attachEvent) // Must follow Opera check.
+else if (typeof window !== "undefined" && (window.attachEvent || (!(window.ActiveXObject) && "ActiveXObject" in window))) // Must follow Opera check.
 {
-    PLATFORM_ENGINE = CPInternetExplorerBrowserEngine;
+    PLATFORM_ENGINE |= CPInternetExplorerBrowserEngine;
 
     // Features we can only be sure of with IE (no known independent tests)
     PLATFORM_FEATURES[CPVMLFeature] = YES;
@@ -133,10 +148,32 @@ else if (typeof window !== "undefined" && window.attachEvent) // Must follow Ope
     PLATFORM_FEATURES[CPJavaScriptClipboardAccessFeature] = YES;
 }
 
-// WebKit
+// Edge
+else if (USER_AGENT.indexOf("Edge/") != -1)
+{
+    PLATFORM_ENGINE |= CPEdgeBrowserEngine;
+
+    PLATFORM_FEATURES[CPCSSRGBAFeature] = YES;
+    PLATFORM_FEATURES[CPHTMLContentEditableFeature] = YES;
+
+    PLATFORM_FEATURES[CPJavaScriptClipboardEventsFeature] = YES;
+    PLATFORM_FEATURES[CPJavaScriptClipboardAccessFeature] = NO;
+    PLATFORM_FEATURES[CPJavaScriptShadowFeature] = YES;
+
+    var versionStart = USER_AGENT.indexOf("Edge/") + "Edge/".length,
+        versionEnd = USER_AGENT.indexOf(" ", versionStart),
+        versionString = USER_AGENT.substring(versionStart, versionEnd),
+        versionDivision = versionString.indexOf('.'),
+        majorVersion = parseInt(versionString.substring(0, versionDivision)),
+        minorVersion = parseInt(versionString.substr(versionDivision + 1));
+
+    PLATFORM_FEATURES[CPJavaScriptRemedialKeySupport] = YES;
+}
+
+// Safari + Chrome (WebKit and Blink)
 else if (USER_AGENT.indexOf("AppleWebKit/") != -1)
 {
-    PLATFORM_ENGINE = CPWebKitBrowserEngine;
+    PLATFORM_ENGINE |= CPWebKitBrowserEngine;
 
     // Features we can only be sure of with WebKit (no known independent tests)
     PLATFORM_FEATURES[CPCSSRGBAFeature] = YES;
@@ -176,7 +213,10 @@ else if (USER_AGENT.indexOf("AppleWebKit/") != -1)
         PLATFORM_BUGS |= CPJavaScriptPasteRequiresEditableTarget;
         // https://bugs.webkit.org/show_bug.cgi?id=39689
         PLATFORM_BUGS |= CPJavaScriptPasteCantRefocus;
+        PLATFORM_BUGS |= CPTextSizingAlwaysNeedsSetFontBug;
     }
+    else if ((window.chrome || (window.Intl && Intl.v8BreakIterator)) && 'CSS' in window)
+        PLATFORM_ENGINE |= CPBlinkBrowserEngine;
 
     // Assume this bug was introduced around Safari 5.1/Chrome 16. This could probably be tighter.
     if (majorVersion > 533)
@@ -186,15 +226,16 @@ else if (USER_AGENT.indexOf("AppleWebKit/") != -1)
 // KHTML
 else if (USER_AGENT.indexOf("KHTML") != -1) // Must follow WebKit check.
 {
-    PLATFORM_ENGINE = CPKHTMLBrowserEngine;
+    PLATFORM_ENGINE |= CPKHTMLBrowserEngine;
 }
 
 // Gecko
 else if (USER_AGENT.indexOf("Gecko") !== -1) // Must follow KHTML check.
 {
-    PLATFORM_ENGINE = CPGeckoBrowserEngine;
+    PLATFORM_ENGINE |= CPGeckoBrowserEngine;
 
     PLATFORM_FEATURES[CPJavaScriptCanvasDrawFeature] = YES;
+    PLATFORM_FEATURES[CPBackspaceTriggersPageBack] = YES;
 
     var index = USER_AGENT.indexOf("Firefox"),
         version = (index === -1) ? 2.0 : parseFloat(USER_AGENT.substring(index + "Firefox".length + 1));
@@ -205,9 +246,13 @@ else if (USER_AGENT.indexOf("Gecko") !== -1) // Must follow KHTML check.
     if (version < 3.0)
         PLATFORM_FEATURES[CPJavaScriptMouseWheelValues_8_15] = YES;
 
+    if (version >= 66)
+        PLATFORM_FEATURES[CPJavaScriptRemedialKeySupport] = YES;
+
     // Some day this might be fixed and should be version prefixed. No known fixed version yet.
     PLATFORM_FEATURES[CPInput1PxLeftPadding] = YES;
 
+    PLATFORM_FEATURES[CPAltEnterTextAreaFeature] = NO;
     // This was supposed to be added in Firefox 22, but when testing with the latest beta as of 2013-06-14
     // it does not seem to work. It seems to exhibit the CPJavaScriptPasteRequiresEditableTarget problem,
     // and in addition doesn't seem to work with our native copy code either.
@@ -282,7 +327,7 @@ function CPPlatformHasBug(aBug)
 
 function CPBrowserIsEngine(anEngine)
 {
-    return PLATFORM_ENGINE === anEngine;
+    return PLATFORM_ENGINE & anEngine;
 }
 
 function CPBrowserIsOperatingSystem(anOperatingSystem)
@@ -318,6 +363,14 @@ else
     CPRedoKeyEquivalentModifierMask = CPControlKeyMask;
 }
 
+/*!
+    Sets a feature with the given value.
+*/
+function CPSetPlatformFeature(aFeature, aBool)
+{
+    PLATFORM_FEATURES[aFeature] = aBool;
+}
+
 /*!
     Return the properly prefixed JS property for the given name. E.g. in a webkit browser,
     CPBrowserStyleProperty('transition') -> WebkitTransition
@@ -365,6 +418,18 @@ function CPBrowserStyleProperty(aProperty)
                 r = candidates[PLATFORM_STYLE_JS_PROPERTIES['transform']] || nil;
                 break;
 
+            case 'animationend':
+                var candidates = {
+                        'WebkitAnimation' : 'webkitAnimationEnd',
+                        'MozAnimation'    : 'animationend',
+                        'OAnimation'      : 'oAnimationEnd',
+                        'msAnimation'     : 'MSAnimationEnd',
+                        'animation'       : 'animationend'
+                    };
+
+                r = candidates[PLATFORM_STYLE_JS_PROPERTIES['animation']] || nil;
+                break;
+
             default:
                 var prefixes = ["Webkit", "Moz", "O", "ms"],
                     strippedProperty = aProperty.split('-').join(' '),
@@ -434,3 +499,12 @@ function CPBrowserCSSProperty(aProperty)
 
     return browserProperty.toLowerCase();
 }
+
+function CPBrowserBackingStorePixelRatio(context)
+{
+    return  context.webkitBackingStorePixelRatio ||
+            context.mozBackingStorePixelRatio ||
+            context.msBackingStorePixelRatio ||
+            context.oBackingStorePixelRatio ||
+            context.backingStorePixelRatio || 1;
+}

AppKit/CPControl.j

@@ -23,23 +23,36 @@
 @import <Foundation/CPFormatter.j>
 @import <Foundation/CPTimer.j>
 
-@import "CPFont.j"
 @import "CPShadow.j"
-@import "CPView.j"
+@import "CPText.j"
 @import "CPKeyValueBinding.j"
+@import "CPTrackingArea.j"
+
+@class CPFont
 
 @global CPApp
 
-CPLeftTextAlignment      = 0;
-CPRightTextAlignment     = 1;
-CPCenterTextAlignment    = 2;
-CPJustifiedTextAlignment = 3;
-CPNaturalTextAlignment   = 4;
+@protocol CPControlTextEditingDelegate <CPObject>
 
+@optional
+- (void)controlTextDidBeginEditing:(CPNotification)aNotification;
+- (void)controlTextDidChange:(CPNotification)aNotification;
+- (void)controlTextDidEndEditing:(CPNotification)aNotification;
+- (void)controlTextDidFocus:(CPNotification)aNotification;
+- (void)controlTextDidBlur:(CPNotification)aNotification;
+- (BOOL)control:(CPControl)control didFailToFormatString:(CPString)string errorDescription:(CPString)error;
+
+@end
+
+@typedef CPControlSize
 CPRegularControlSize = 0;
 CPSmallControlSize   = 1;
 CPMiniControlSize    = 2;
 
+// To get the theme state corresponding to a control size, use CPControlSizeThemeStates[controlSize]
+CPControlSizeThemeStates = @[CPThemeStateControlSizeRegular, CPThemeStateControlSizeSmall, CPThemeStateControlSizeMini];
+
+@typedef CPLineBreakMode
 CPLineBreakByWordWrapping     = 0;
 CPLineBreakByCharWrapping     = 1;
 CPLineBreakByClipping         = 2;
@@ -47,11 +60,13 @@ CPLineBreakByTruncatingHead   = 3;
 CPLineBreakByTruncatingTail   = 4;
 CPLineBreakByTruncatingMiddle = 5;
 
+@typedef CPVerticalTextAlignment
 CPTopVerticalTextAlignment    = 1;
 CPCenterVerticalTextAlignment = 2;
 CPBottomVerticalTextAlignment = 3;
 
 // Deprecated for use with images, use the CPImageScale constants
+@typedef CPImageScaling
 CPScaleProportionally = 0;
 CPScaleToFit          = 1;
 CPScaleNone           = 2;
@@ -61,6 +76,7 @@ CPImageScaleAxesIndependently      = 1;
 CPImageScaleNone                   = 2;
 CPImageScaleProportionallyUpOrDown = 3;
 
+@typedef CPCellImagePosition
 CPNoImage       = 0;
 CPImageOnly     = 1;
 CPImageLeft     = 2;
@@ -106,6 +122,10 @@ var CPControlBlackColor = [CPColor blackColor];
     BOOL                _trackingWasWithinFrame;
     unsigned            _trackingMouseDownFlags;
     CGPoint             _previousTrackingLocation;
+
+    CPControlSize       _controlSize;
+
+    CPWritingDirection  _baseWritingDirection   @accessors(property=baseWritingDirection);
 }
 
 + (CPDictionary)themeAttributes
@@ -115,13 +135,13 @@ var CPControlBlackColor = [CPColor blackColor];
             @"vertical-alignment": CPTopVerticalTextAlignment,
             @"line-break-mode": CPLineBreakByClipping,
             @"text-color": [CPColor blackColor],
-            @"font": [CPFont systemFontOfSize:CPFontCurrentSystemSize],
+            @"font": [CPNull null],
             @"text-shadow-color": [CPNull null],
             @"text-shadow-offset": CGSizeMakeZero(),
             @"image-position": CPImageLeft,
             @"image-scaling": CPScaleToFit,
             @"min-size": CGSizeMakeZero(),
-            @"max-size": CGSizeMake(-1.0, -1.0),
+            @"max-size": CGSizeMake(-1.0, -1.0)
         };
 }
 
@@ -152,7 +172,7 @@ var CPControlBlackColor = [CPColor blackColor];
 }
 
 /*!
-    Reverse set the binding iff the CPContinuouslyUpdatesValueBindingOption is set.
+    Reverse set the binding if the CPContinuouslyUpdatesValueBindingOption is set.
 */
 - (void)_continuouslyReverseSetBinding
 {
@@ -177,13 +197,97 @@ var CPControlBlackColor = [CPColor blackColor];
 
     if (self)
     {
-        _sendActionOn = CPLeftMouseUpMask;
+        _sendActionOn           = CPLeftMouseUpMask;
         _trackingMouseDownFlags = 0;
+
+        [self setControlSize:CPThemeStateControlSizeRegular];
+        [self updateTrackingAreas];
     }
 
     return self;
 }
 
+// MARK: -
+// MARK: Control Size
+
+/*!
+    Returns the control's control size
+*/
+- (CPControlSize)controlSize
+{
+    return _controlSize;
+}
+
+/*!
+    Sets the control's size.
+    @param aControlSize the control's size
+*/
+- (void)setControlSize:(CPControlSize)aControlSize
+{
+    if (_controlSize === aControlSize)
+        return;
+
+    [self unsetThemeState:[self _controlSizeThemeState]];
+    _controlSize = aControlSize;
+    [self setThemeState:[self _controlSizeThemeState]];
+
+    [self setNeedsLayout];
+    [self setNeedsDisplay:YES];
+}
+
+/*!
+    Gets the current theme state according to the current controlSize.
+    @return a CPThemeState
+*/
+- (ThemeState)_controlSizeThemeState
+{
+    switch (_controlSize)
+    {
+        case CPSmallControlSize:
+            return CPThemeStateControlSizeSmall;
+
+        case CPMiniControlSize:
+            return CPThemeStateControlSizeMini;
+
+        case CPRegularControlSize:
+        default:
+            return CPThemeStateControlSizeRegular;
+    }
+}
+
+/*!
+    @ignore
+    Change frame size according to the theme control size theme constraints
+    Basically for height to min-size.
+*/
+- (void)_sizeToControlSize
+{
+    var frameSize = [self frameSize],
+        minSize = [self currentValueForThemeAttribute:@"min-size"],
+        maxSize = [self currentValueForThemeAttribute:@"max-size"];
+
+    if (minSize.width > 0)
+    {
+        frameSize.width = MAX(minSize.width, frameSize.width);
+
+        if (maxSize.width > 0)
+            frameSize.width = MIN(maxSize.width, frameSize.width);
+    }
+
+    if (minSize.height > 0)
+    {
+        frameSize.height = MAX(minSize.height, frameSize.height);
+
+        if (maxSize.height > 0)
+            frameSize.height = MIN(maxSize.height, frameSize.height);
+    }
+
+    [self setFrameSize:frameSize];
+}
+
+
+// MARK: -
+
 /*!
     Sets the receiver's target action.
 
@@ -522,15 +626,15 @@ var CPControlBlackColor = [CPColor blackColor];
 */
 - (CPString)stringValue
 {
-    if (_formatter && _value !== undefined)
+    if (_formatter && _value != nil)
     {
         var formattedValue = [self hasThemeState:CPThemeStateEditing] ? [_formatter editingStringForObjectValue:_value] : [_formatter stringForObjectValue:_value];
 
-        if (formattedValue !== nil && formattedValue !== undefined)
+        if (formattedValue != nil)
             return formattedValue;
     }
 
-    return (_value === undefined || _value === nil) ? @"" : String(_value);
+    return _value == nil ? @"" : String(_value);
 }
 
 /*!
@@ -539,7 +643,7 @@ var CPControlBlackColor = [CPColor blackColor];
 - (void)setStringValue:(CPString)aString
 {
     // Cocoa raises an invalid parameter assertion and returns if you pass nil.
-    if (aString === nil || aString === undefined)
+    if (aString == nil)
     {
         CPLog.warn("nil or undefined sent to CPControl -setStringValue");
         return;
@@ -705,7 +809,7 @@ var CPControlBlackColor = [CPColor blackColor];
     CPBottomVerticalTextAlignment
     </pre>
 */
-- (void)setVerticalAlignment:(CPTextVerticalAlignment)alignment
+- (void)setVerticalAlignment:(CPVerticalTextAlignment)alignment
 {
     [self setValue:alignment forThemeAttribute:@"vertical-alignment"];
 }
@@ -750,7 +854,12 @@ var CPControlBlackColor = [CPColor blackColor];
 */
 - (void)setTextColor:(CPColor)aColor
 {
-    [self setValue:aColor forThemeAttribute:@"text-color"];
+    [self setValue:aColor forThemeAttribute:@"text-color" inState:[self themeState]];
+}
+
+- (void)setTextColor:(CPColor)aColor inThemeStates:(CPArray)themeStates
+{
+    [self setValue:aColor forThemeAttribute:@"text-color" inStates:themeStates];
 }
 
 /*!
@@ -808,7 +917,7 @@ var CPControlBlackColor = [CPColor blackColor];
 */
 - (CPFont)font
 {
-    return [self valueForThemeAttribute:@"font"];
+    return [self currentValueForThemeAttribute:@"font"] || [CPFont systemFontForControlSize:_controlSize];
 }
 
 /*!
@@ -913,16 +1022,81 @@ var CPControlBlackColor = [CPColor blackColor];
     return [self hasThemeState:CPThemeStateHighlighted];
 }
 
+
+// MARK: -
+// MARK: Base writing direction
+
+/*!
+    Sets the initial writing direction of the receiver
+    @param writingDirection - It could be CPWritingDirectionNatural, CPWritingDirectionLeftToRight, CPWritingDirectionRightToLeft
+*/
+- (void)setBaseWritingDirection:(CPWritingDirection)writingDirection
+{
+    if (writingDirection == _baseWritingDirection)
+        return;
+
+    [self willChangeValueForKey:@"baseWritingDirection"];
+    _baseWritingDirection = writingDirection;
+    [self didChangeValueForKey:@"baseWritingDirection"];
+
+#if PLATFORM(DOM)
+
+    var style;
+
+    switch (_baseWritingDirection)
+    {
+        case CPWritingDirectionNatural:
+            style = "initial";
+            break;
+
+        case CPWritingDirectionLeftToRight:
+            style = "ltr";
+            break;
+
+        case CPWritingDirectionRightToLeft:
+            style = "rtl";
+            break;
+
+        default:
+            style = "initial";
+    }
+
+    _DOMElement.style.direction = style;
+#endif
+}
+
 @end
 
-var CPControlValueKey                   = @"CPControlValueKey",
+@implementation CPControl (CPTrackingArea)
+{
+    CPTrackingArea      _controlTrackingArea;
+}
+
+- (void)updateTrackingAreas
+{
+    if (_controlTrackingArea)
+        [self removeTrackingArea:_controlTrackingArea];
+    
+    _controlTrackingArea = [[CPTrackingArea alloc] initWithRect:CGRectMakeZero()
+                                                        options:CPTrackingMouseEnteredAndExited | CPTrackingActiveInKeyWindow | CPTrackingInVisibleRect
+                                                          owner:self
+                                                       userInfo:nil];
+    [self addTrackingArea:_controlTrackingArea];
+    [super updateTrackingAreas];
+}
+
+@end
+
+var CPControlActionKey                  = @"CPControlActionKey",
+    CPControlControlSizeKey             = @"CPControlControlSizeKey",
     CPControlControlStateKey            = @"CPControlControlStateKey",
-    CPControlIsEnabledKey               = @"CPControlIsEnabledKey",
-    CPControlTargetKey                  = @"CPControlTargetKey",
-    CPControlActionKey                  = @"CPControlActionKey",
-    CPControlSendActionOnKey            = @"CPControlSendActionOnKey",
     CPControlFormatterKey               = @"CPControlFormatterKey",
+    CPControlIsEnabledKey               = @"CPControlIsEnabledKey",
+    CPControlSendActionOnKey            = @"CPControlSendActionOnKey",
     CPControlSendsActionOnEndEditingKey = @"CPControlSendsActionOnEndEditingKey",
+    CPControlTargetKey                  = @"CPControlTargetKey",
+    CPControlValueKey                   = @"CPControlValueKey",
+    CPControlBaseWrittingDirectionKey   = @"CPControlBaseWrittingDirectionKey";
 
     __Deprecated__CPImageViewImageKey   = @"CPImageViewImageKey";
 
@@ -949,6 +1123,11 @@ var CPControlValueKey                   = @"CPControlValueKey",
         [self setSendsActionOnEndEditing:[aCoder decodeBoolForKey:CPControlSendsActionOnEndEditingKey]];
 
         [self setFormatter:[aCoder decodeObjectForKey:CPControlFormatterKey]];
+
+        [self setControlSize:[aCoder decodeIntForKey:CPControlControlSizeKey]];
+
+        [self setBaseWritingDirection:[aCoder decodeIntForKey:CPControlBaseWrittingDirectionKey]];
+        [self updateTrackingAreas];
     }
 
     return self;
@@ -968,19 +1147,24 @@ var CPControlValueKey                   = @"CPControlValueKey",
 
     var objectValue = [self objectValue];
 
-    if (objectValue !== nil)
+    if (objectValue != nil)
         [aCoder encodeObject:objectValue forKey:CPControlValueKey];
 
-    if (_target !== nil)
+    if (_target != nil)
         [aCoder encodeConditionalObject:_target forKey:CPControlTargetKey];
 
-    if (_action !== nil)
+    if (_action != nil)
         [aCoder encodeObject:_action forKey:CPControlActionKey];
 
     [aCoder encodeInt:_sendActionOn forKey:CPControlSendActionOnKey];
 
-    if (_formatter !== nil)
+    if (_formatter != nil)
         [aCoder encodeObject:_formatter forKey:CPControlFormatterKey];
+
+    [aCoder encodeInt:_controlSize forKey:CPControlControlSizeKey];
+
+    [aCoder encodeInt:_baseWritingDirection forKey:CPControlBaseWrittingDirectionKey];
+
 }
 
 @end

AppKit/CPCookie.j

@@ -37,6 +37,8 @@
     CPString    _expires;
 }
 
+@global document
+
 /*!
     Initializes a cookie with a given name \c aName.
     @param the name for the cookie

AppKit/CPCursor.j

@@ -22,6 +22,8 @@ Cursor support by browser:
 */
 
 @import <Foundation/CPObject.j>
+@import "CPImage.j"
+@import "CPCompatibility.j"
 
 @global CPApp
 
@@ -30,6 +32,12 @@ var currentCursor = nil,
     cursors = {},
     ieCursorMap = {};
 
+@typedef CPCursorPlatform
+CPCursorPlatformNone    = 0;
+CPCursorPlatformMac     = 1;
+CPCursorPlatformWindows = 2;
+CPCursorPlatformBoth    = 3;
+
 @implementation CPCursor : CPObject
 {
     CPString _cssString @accessors(readonly);
@@ -122,6 +130,9 @@ var currentCursor = nil,
 
 - (void)set
 {
+    if (currentCursor === self)
+        return;
+    
     currentCursor = self;
 
 #if PLATFORM(DOM)
@@ -153,7 +164,7 @@ var currentCursor = nil,
 }
 
 // Internal method that is used to return the system cursors.  Caches the system cursors for performance.
-+ (CPCursor)_systemCursorWithName:(CPString)cursorName cssString:(CPString)aString hasImage:(BOOL)doesHaveImage
++ (CPCursor)_nativeSystemCursorWithName:(CPString)cursorName cssString:(CPString)aString
 {
     var cursor = cursors[cursorName];
 
@@ -161,155 +172,216 @@ var currentCursor = nil,
     {
         var cssString;
 
-        if (doesHaveImage)
-        {
-            var themeResourcePath = [[[CPApp themeBlend] bundle] resourcePath],
-                extension = CPBrowserIsEngine(CPInternetExplorerBrowserEngine) ? @"cur" : @"png";
-
-            cssString = [CPString stringWithFormat:@"url(%@cursors/%@.%@), %@", themeResourcePath, cursorName, extension, aString];
-        }
+        // IE <= 8 does not support some cursors, map them to supported cursors
+        var ieLessThan9 = CPBrowserIsEngine(CPInternetExplorerBrowserEngine) && !CPFeatureIsCompatible(CPHTMLCanvasFeature);
 
+        if (ieLessThan9)
+            cssString = ieCursorMap[aString] || aString;
         else
-        {
-            // IE <= 8 does not support some cursors, map them to supported cursors
-            var ieLessThan9 = CPBrowserIsEngine(CPInternetExplorerBrowserEngine) && !CPFeatureIsCompatible(CPHTMLCanvasFeature);
+            cssString = aString;
 
-            if (ieLessThan9)
-                cssString = ieCursorMap[aString] || aString;
-            else
-                cssString = aString;
-        }
-
-        cursor = [[CPCursor alloc] initWithCSSString:cssString];
-        cursors[cursorName] = cursor;
+        cursors[cursorName] = cursor = [[CPCursor alloc] initWithCSSString:cssString];
     }
 
     return cursor;
 }
 
++ (CPCursor)_imageCursorWithName:(CPString)cursorName cssString:(CPString)aString
+{
+    var cursor = cursors[cursorName];
+
+    if (typeof cursor === "undefined")
+    {
+        var themeResourcePath = [[[CPApp themeBlend] bundle] resourcePath],
+            extension = CPBrowserIsOperatingSystem(CPWindowsOperatingSystem) ? @"cur" : @"png",
+            cssString = [CPString stringWithFormat:@"url(%@cursors/%@.%@), %@", themeResourcePath, cursorName, extension, aString];
+
+        cursors[cursorName] = cursor = [[CPCursor alloc] initWithCSSString:cssString];
+    }
+
+    return cursor;
+}
+
++ (CPCursor)_tryUsingNativeSystemCursorWithName:(CPString)cursorName cssString:(CPString)cssName onPlatform:(CPCursorPlatform)shouldUseNativeCursorOn fallingBackWithImageAndCSSPointer:(CPString)aString
+{
+    var useNativeSystemCursor = (((shouldUseNativeCursorOn == CPCursorPlatformBoth) ||
+                                  ((shouldUseNativeCursorOn == CPCursorPlatformMac) && CPBrowserIsOperatingSystem(CPMacOperatingSystem)) ||
+                                  ((shouldUseNativeCursorOn == CPCursorPlatformWindows) && CPBrowserIsOperatingSystem(CPWindowsOperatingSystem)))
+                                 && [CPCursor _nativeCursorExists:cssName]);
+
+    if (useNativeSystemCursor)
+        return [CPCursor _nativeSystemCursorWithName:cursorName cssString:cssName];
+    else
+        return [CPCursor _imageCursorWithName:cursorName cssString:aString];
+}
+
++ (BOOL)_nativeCursorExists:(CPString)cursorCSSName
+{
+#if PLATFORM(DOM)
+
+    // FIXME: Trick until FF/Win & Chrome/Win correctly implement context-menu cursor
+    // They will answer that they implement it but they actually don't
+
+    if ([cursorCSSName isEqualToString:@"context-menu"] && CPBrowserIsOperatingSystem(CPWindowsOperatingSystem) && !CPBrowserIsEngine(CPInternetExplorerBrowserEngine) && !CPBrowserIsEngine(CPEdgeBrowserEngine))
+        return NO;
+
+    // Normal usage : try to set the cursor and check if resulting cursor is the one we tried to set.
+    // If yes, then the browser implements the cursor. If no (and usually we get "default"), then it doesn't.
+
+    var platformWindows = [[CPPlatformWindow visiblePlatformWindows] allObjects],
+        count = [platformWindows count];
+
+    if (count > 0)
+    {
+        var currentPlatformCursor = platformWindows[0]._DOMBodyElement.style.cursor;
+        platformWindows[0]._DOMBodyElement.style.cursor = cursorCSSName;
+        var doesExist = (platformWindows[0]._DOMBodyElement.style.cursor == cursorCSSName);
+        platformWindows[0]._DOMBodyElement.style.cursor = currentPlatformCursor;
+
+        return doesExist;
+    }
+#endif
+
+    return NO;
+}
+
 + (CPCursor)arrowCursor
 {
-    return [CPCursor _systemCursorWithName:CPStringFromSelector(_cmd) cssString:@"default" hasImage:NO];
+    return [CPCursor _nativeSystemCursorWithName:CPStringFromSelector(_cmd) cssString:@"default"];
 }
 
 + (CPCursor)crosshairCursor
 {
-    return [CPCursor _systemCursorWithName:CPStringFromSelector(_cmd) cssString:@"crosshair" hasImage:NO];
+    return [CPCursor _nativeSystemCursorWithName:CPStringFromSelector(_cmd) cssString:@"crosshair"];
 }
 
 + (CPCursor)IBeamCursor
 {
-    return [CPCursor _systemCursorWithName:CPStringFromSelector(_cmd) cssString:@"text" hasImage:NO];
+    return [CPCursor _nativeSystemCursorWithName:CPStringFromSelector(_cmd) cssString:@"text"];
 }
 
 + (CPCursor)pointingHandCursor
 {
-    return [CPCursor _systemCursorWithName:CPStringFromSelector(_cmd) cssString:@"pointer" hasImage:NO];
+    return [CPCursor _nativeSystemCursorWithName:CPStringFromSelector(_cmd) cssString:@"pointer"];
 }
 
 + (CPCursor)resizeNorthwestCursor
 {
-    return [CPCursor _systemCursorWithName:CPStringFromSelector(_cmd) cssString:@"nw-resize" hasImage:NO];
+    return [CPCursor _nativeSystemCursorWithName:CPStringFromSelector(_cmd) cssString:@"nw-resize"];
 }
 
 + (CPCursor)resizeNorthwestSoutheastCursor
 {
-    return [CPCursor _systemCursorWithName:CPStringFromSelector(_cmd) cssString:@"nwse-resize" hasImage:NO];
+    return [CPCursor _nativeSystemCursorWithName:CPStringFromSelector(_cmd) cssString:@"nwse-resize"];
 }
 
 + (CPCursor)resizeNortheastCursor
 {
-    return [CPCursor _systemCursorWithName:CPStringFromSelector(_cmd) cssString:@"ne-resize" hasImage:NO];
+    return [CPCursor _nativeSystemCursorWithName:CPStringFromSelector(_cmd) cssString:@"ne-resize"];
 }
 
 + (CPCursor)resizeNortheastSouthwestCursor
 {
-    return [CPCursor _systemCursorWithName:CPStringFromSelector(_cmd) cssString:@"nesw-resize" hasImage:NO];
+    return [CPCursor _nativeSystemCursorWithName:CPStringFromSelector(_cmd) cssString:@"nesw-resize"];
 }
 
 + (CPCursor)resizeSouthwestCursor
 {
-    return [CPCursor _systemCursorWithName:CPStringFromSelector(_cmd) cssString:@"sw-resize" hasImage:NO];
+    return [CPCursor _nativeSystemCursorWithName:CPStringFromSelector(_cmd) cssString:@"sw-resize"];
 }
 
 + (CPCursor)resizeSoutheastCursor
 {
-    return [CPCursor _systemCursorWithName:CPStringFromSelector(_cmd) cssString:@"se-resize" hasImage:NO];
+    return [CPCursor _nativeSystemCursorWithName:CPStringFromSelector(_cmd) cssString:@"se-resize"];
 }
 
 + (CPCursor)resizeDownCursor
 {
-    return [CPCursor _systemCursorWithName:CPStringFromSelector(_cmd) cssString:@"s-resize" hasImage:NO];
+    return [CPCursor _nativeSystemCursorWithName:CPStringFromSelector(_cmd) cssString:@"s-resize"];
 }
 
 + (CPCursor)resizeUpCursor
 {
-    return [CPCursor _systemCursorWithName:CPStringFromSelector(_cmd) cssString:@"n-resize" hasImage:NO];
+    return [CPCursor _nativeSystemCursorWithName:CPStringFromSelector(_cmd) cssString:@"n-resize"];
 }
 
 + (CPCursor)resizeLeftCursor
 {
-    return [CPCursor _systemCursorWithName:CPStringFromSelector(_cmd) cssString:@"w-resize" hasImage:NO];
+    return [CPCursor _nativeSystemCursorWithName:CPStringFromSelector(_cmd) cssString:@"w-resize"];
 }
 
 + (CPCursor)resizeRightCursor
 {
-    return [CPCursor _systemCursorWithName:CPStringFromSelector(_cmd) cssString:@"e-resize" hasImage:NO];
+    return [CPCursor _nativeSystemCursorWithName:CPStringFromSelector(_cmd) cssString:@"e-resize"];
 }
 
 + (CPCursor)resizeLeftRightCursor
 {
-    return [CPCursor _systemCursorWithName:CPStringFromSelector(_cmd) cssString:@"col-resize" hasImage:NO];
+    return [CPCursor _nativeSystemCursorWithName:CPStringFromSelector(_cmd) cssString:@"col-resize"];
 }
 
 + (CPCursor)resizeEastWestCursor
 {
-    return [CPCursor _systemCursorWithName:CPStringFromSelector(_cmd) cssString:@"ew-resize" hasImage:NO];
+    return [CPCursor _nativeSystemCursorWithName:CPStringFromSelector(_cmd) cssString:@"ew-resize"];
 }
 
 + (CPCursor)resizeUpDownCursor
 {
-    return [CPCursor _systemCursorWithName:CPStringFromSelector(_cmd) cssString:@"row-resize" hasImage:NO];
+    return [CPCursor _nativeSystemCursorWithName:CPStringFromSelector(_cmd) cssString:@"row-resize"];
 }
 
 + (CPCursor)resizeNorthSouthCursor
 {
-    return [CPCursor _systemCursorWithName:CPStringFromSelector(_cmd) cssString:@"ns-resize" hasImage:NO];
+    return [CPCursor _nativeSystemCursorWithName:CPStringFromSelector(_cmd) cssString:@"ns-resize"];
 }
 
 + (CPCursor)operationNotAllowedCursor
 {
-    return [CPCursor _systemCursorWithName:CPStringFromSelector(_cmd) cssString:@"not-allowed" hasImage:NO];
+    return [CPCursor _nativeSystemCursorWithName:CPStringFromSelector(_cmd) cssString:@"not-allowed"];
 }
 
 + (CPCursor)dragCopyCursor
 {
-    return [CPCursor _systemCursorWithName:CPStringFromSelector(_cmd) cssString:@"copy" hasImage:YES];
+    return [CPCursor _nativeSystemCursorWithName:CPStringFromSelector(_cmd) cssString:@"copy"];
 }
 
 + (CPCursor)dragLinkCursor
 {
-    return [CPCursor _systemCursorWithName:CPStringFromSelector(_cmd) cssString:@"alias" hasImage:YES];
+    return [CPCursor _nativeSystemCursorWithName:CPStringFromSelector(_cmd) cssString:@"alias"];
 }
 
 + (CPCursor)contextualMenuCursor
 {
-    return [CPCursor _systemCursorWithName:CPStringFromSelector(_cmd) cssString:@"context-menu" hasImage:YES];
+    return [CPCursor _tryUsingNativeSystemCursorWithName:CPStringFromSelector(_cmd)
+                                               cssString:@"context-menu"
+                                              onPlatform:CPCursorPlatformBoth
+                       fallingBackWithImageAndCSSPointer:@"default"];
 }
 
 + (CPCursor)openHandCursor
 {
-    return [CPCursor _systemCursorWithName:CPStringFromSelector(_cmd) cssString:@"move" hasImage:YES];
+    return [CPCursor _tryUsingNativeSystemCursorWithName:CPStringFromSelector(_cmd)
+                                               cssString:@"grab"
+                                              onPlatform:CPCursorPlatformMac
+                       fallingBackWithImageAndCSSPointer:@"default"];
 }
 
 + (CPCursor)closedHandCursor
 {
-    return [CPCursor _systemCursorWithName:CPStringFromSelector(_cmd) cssString:@"-moz-grabbing" hasImage:YES];
+    return [CPCursor _tryUsingNativeSystemCursorWithName:CPStringFromSelector(_cmd)
+                                               cssString:@"grabbing"
+                                              onPlatform:CPCursorPlatformMac
+                       fallingBackWithImageAndCSSPointer:@"default"];
 }
 
 + (CPCursor)disappearingItemCursor
 {
-    return [CPCursor _systemCursorWithName:CPStringFromSelector(_cmd) cssString:@"auto" hasImage:YES];
+    return [CPCursor _imageCursorWithName:CPStringFromSelector(_cmd) cssString:@"default"];
+}
+
++ (CPCursor)IBeamCursorForVerticalLayout
+{
+    return [CPCursor _nativeSystemCursorWithName:CPStringFromSelector(_cmd) cssString:@"vertical-text"];
 }
 
 @end

AppKit/CPDatePicker/CPDatePicker.j

@@ -1,7 +1,7 @@
 /* CPDatePicker.j
 * AppKit
 *
-* Created by Alexandre Wilhelm
+* Created by Alexandre Wilhelm 
 * Copyright 2012 <alexandre.wilhelmfr@gmail.com>
 *
 * This library is free software; you can redistribute it and/or
@@ -28,7 +28,6 @@
 @import <Foundation/CPArray.j>
 @import <Foundation/CPObject.j>
 @import <Foundation/CPDate.j>
-@import <Foundation/CPDateFormatter.j>
 @import <Foundation/CPLocale.j>
 @import <Foundation/CPTimeZone.j>
 
@@ -60,30 +59,31 @@ CPEraDatePickerElementFlag              = 0x0100;
 */
 @implementation CPDatePicker : CPControl
 {
-    BOOL            _isBordered         @accessors(getter=isBordered, setter=setBordered:);
-    BOOL            _isBezeled          @accessors(getter=isBezeled, setter=setBezeled:);
-    BOOL            _drawsBackground    @accessors(property=drawsBackground);
-    CPDate          _dateValue          @accessors(property=dateValue);
-    CPDate          _minDate            @accessors(property=minDate);
-    CPDate          _maxDate            @accessors(property=maxDate);
-    CPFont          _textFont           @accessors(property=textFont);
-    CPLocale        _locale             @accessors(property=locale);
-    //CPCalendar  _calendar           @accessors(property=calendar);
-    CPTimeZone      _timeZone           @accessors(property=timeZone);
-    id              _delegate           @accessors(property=delegate);
-    CPInteger       _datePickerElements @accessors(property=datePickerElements);
-    CPInteger       _datePickerMode     @accessors(property=datePickerMode);
-    CPInteger       _datePickerStyle    @accessors(property=datePickerStyle);
-    CPInteger       _timeInterval       @accessors(property=timeInterval);
+    BOOL                    _isBordered         @accessors(getter=isBordered, setter=setBordered:);
+    BOOL                    _isBezeled          @accessors(getter=isBezeled, setter=setBezeled:);
+    BOOL                    _drawsBackground    @accessors(property=drawsBackground);
+    CPDate                  _dateValue          @accessors(property=dateValue);
+    CPDate                  _minDate            @accessors(property=minDate);
+    CPDate                  _maxDate            @accessors(property=maxDate);
+    CPFont                  _textFont           @accessors(property=textFont);
+    CPLocale                _locale             @accessors(property=locale);
+    //CPCalendar            _calendar           @accessors(property=calendar);
+    CPTimeZone              _timeZone           @accessors(property=timeZone);
+    id                      _delegate           @accessors(property=delegate);
+    CPInteger               _datePickerElements @accessors(property=datePickerElements);
+    CPInteger               _datePickerMode     @accessors(property=datePickerMode);
+    CPInteger               _datePickerStyle    @accessors(property=datePickerStyle);
+    CPInteger               _timeInterval       @accessors(property=timeInterval);
 
-    _CPDatePickerTextField  _datePickerTextfield;
-    _CPDatePickerCalendar   _datePickerCalendar;
+    BOOL                    _invokedByUserEvent;
     unsigned                _implementedCDatePickerDelegateMethods;
+    BOOL                    _isTextual;
+    id                      _datePickerComponent;
 }
 
 
-#pragma mark -
-#pragma mark Theme methods
+// MARK: -
+// MARK: Theme methods
 
 + (CPString)defaultThemeClass
 {
@@ -144,12 +144,38 @@ CPEraDatePickerElementFlag              = 0x0100;
             @"hour-hand-size": CGSizeMakeZero(),
             @"middle-hand-size": CGSizeMakeZero(),
             @"minute-hand-size": CGSizeMakeZero(),
+            @"previous-button-size": CGSizeMakeZero(),
+            @"current-button-size": CGSizeMakeZero(),
+            @"next-button-size": CGSizeMakeZero(),
+            @"title-inset": [CPNull null],
+            @"day-label-inset": [CPNull null],
+            @"tile-content-inset": CGInsetMakeZero(),
+            @"tile-margin": [CPNull null],
+            @"tile-inset": CGInsetMakeZero(),
+            @"separator-color": [CPNull null],
+            @"separator-margin-width": 0,
+            @"separator-height": 0,
+            @"bezel-color-calendar-left": [CPNull null],
+            @"bezel-color-calendar-middle": [CPNull null],
+            @"bezel-color-calendar-right": [CPNull null],
+            @"tile-vertical-alignment": CPCenterVerticalTextAlignment,
+            @"tile-text-alignment": CPCenterTextAlignment,
+            @"hour-ampm-margin": 2,
+            @"time-separator-content-inset": CGInsetMakeZero(),
+            @"clock-second-hand-over": NO,
+            @"clock-draws-hours": NO,
+            @"clock-hours-font": [CPNull null],
+            @"clock-hours-text-color": [CPColor clearColor],
+            @"clock-hours-radius": 0,
+            @"calendar-clock-margin": 10,
+            @"clock-only-nib2cib-adjustment-frame": CPRectMakeZero(),
+            @"uses-focus-ring": NO
     };
 }
 
 
-#pragma mark -
-#pragma mark Binding methods
+// MARK: -
+// MARK: Binding methods
 
 + (Class)_binderClassForBinding:(CPString)theBinding
 {
@@ -174,8 +200,8 @@ CPEraDatePickerElementFlag              = 0x0100;
 }
 
 
-#pragma mark -
-#pragma mark Init methods
+// MARK: -
+// MARK: Init methods
 
 - (id)initWithFrame:(CGRect)aFrame
 {
@@ -206,26 +232,61 @@ CPEraDatePickerElementFlag              = 0x0100;
     if (!_locale)
         _locale = [CPLocale currentLocale];
 
-    if (!_timeZone)
-        _timeZone = [CPTimeZone systemTimeZone];
+    _datePickerComponent = nil;
 
-    _datePickerTextfield = [[_CPDatePickerTextField alloc] initWithFrame:[self bounds] withDatePicker:self];
-
-    [_datePickerTextfield setDateValue:_dateValue];
-    [self addSubview:_datePickerTextfield];
-
-    _datePickerCalendar = [[_CPDatePickerCalendar alloc] initWithFrame:[self bounds] withDatePicker:self];
-    [_datePickerCalendar setDateValue:_dateValue];
-    [_datePickerCalendar setHidden:YES];
-    [self addSubview:_datePickerCalendar];
+    [self _createComponents];
 
     [self setNeedsDisplay:YES];
     [self setNeedsLayout];
 }
 
+- (void)_createComponents
+{
+    _isTextual = (_datePickerStyle == CPTextFieldAndStepperDatePickerStyle) || (_datePickerStyle == CPTextFieldDatePickerStyle);
 
-#pragma mark -
-#pragma mark Delegate methods
+    if (_datePickerComponent)
+    {
+        [_datePickerComponent removeFromSuperview];
+
+        _datePickerComponent = nil;
+    }
+
+    _datePickerComponent = [[(_isTextual ? _CPDatePickerTextField : _CPDatePickerCalendar) alloc] initWithFrame:[self bounds] withDatePicker:self];
+
+    [_datePickerComponent setDateValue:_dateValue];
+    [_datePickerComponent setControlSize:[self controlSize]];
+    [_datePickerComponent setDatePickerElements:_datePickerElements];
+
+    // FIXME: Don't know why but next line will cause theme compilation to fail...
+    // Workaround: added "if PLATFORM(DOM)"
+#if PLATFORM(DOM)
+    [_datePickerComponent setEnabled:[self isEnabled]];
+#endif
+
+    if (_isTextual)
+        // We need to transmit text color to the text field version (Cocoa doesn't permit adapting the calendar view text color)
+        [_datePickerComponent setTextColor:[self textColor]];
+
+    [self addSubview:_datePickerComponent];
+}
+
+
+// MARK: -
+// MARK: Control Size
+
+- (void)setControlSize:(CPControlSize)aControlSize
+{
+    [super setControlSize:aControlSize];
+
+    [_datePickerComponent setControlSize:aControlSize];
+
+    if (_isTextual)
+        [self _sizeToControlSize];
+}
+
+
+// MARK: -
+// MARK: Delegate methods
 
 /*! Set the delegate of the datePicker
     @param aDelegate delegate of the datePicker
@@ -241,31 +302,19 @@ CPEraDatePickerElementFlag              = 0x0100;
 }
 
 
-#pragma mark -
-#pragma mark Layout method
+// MARK: -
+// MARK: Layout method
 
 /*! Layout the subviews
 */
 - (void)layoutSubviews
 {
-    [super layoutSubviews];
-
-    if (_datePickerStyle == CPTextFieldAndStepperDatePickerStyle || _datePickerStyle == CPTextFieldDatePickerStyle)
-    {
-        [_datePickerTextfield setHidden:NO];
-        [_datePickerCalendar setHidden:YES];
-        [_datePickerTextfield setNeedsLayout];
-    }
-    else
-    {
-        [_datePickerCalendar setHidden:NO];
-        [_datePickerTextfield setHidden:YES];
-        [_datePickerCalendar setNeedsLayout];
-    }
+    [_datePickerComponent setNeedsLayout];
+    [_datePickerComponent setNeedsDisplay:YES];
 }
 
-#pragma mark -
-#pragma mark Setter
+// MARK: -
+// MARK: Setter
 
 /*! Return the objectValue of the datePicker. The objectValue should take the timeZoneEffect
 */
@@ -275,11 +324,14 @@ CPEraDatePickerElementFlag              = 0x0100;
     return _dateValue
 }
 
-/*! Set the objectValue ofhe datePier. It has to be a CPDate
+/*! Set the objectValue of the datePicker. It has to be a CPDate
     @param aDateValue the dateValue
 */
 - (void)setObjectValue:(CPDate)aValue
 {
+    if (![aValue isKindOfClass:[CPDate class]])
+        return;
+
     [self setDateValue:aValue];
 }
 
@@ -291,6 +343,7 @@ CPEraDatePickerElementFlag              = 0x0100;
     if (aDateValue == nil)
         return;
 
+    _invokedByUserEvent = NO;
     [self _setDateValue:aDateValue timeInterval:_timeInterval];
 }
 
@@ -300,6 +353,14 @@ CPEraDatePickerElementFlag              = 0x0100;
 */
 - (void)_setDateValue:(CPDate)aDateValue timeInterval:(CPTimeInterval)aTimeInterval
 {
+    // Make sure to have a valid date and avoid NaN values
+    if (!isFinite(aDateValue))
+    {
+        [CPException raise:CPInvalidArgumentException
+                    reason:@"aDateValue is not valid"];
+        return;
+    }
+
     if (_minDate)
         aDateValue = new Date (MAX(aDateValue, _minDate));
 
@@ -309,13 +370,17 @@ CPEraDatePickerElementFlag              = 0x0100;
     aTimeInterval = MAX(MIN(aTimeInterval, [_maxDate timeIntervalSinceDate:aDateValue]), [_minDate timeIntervalSinceDate:aDateValue]);
 
     if ([aDateValue isEqualToDate:_dateValue] && aTimeInterval == _timeInterval)
+    {
+        [_datePickerComponent setDateValue:_dateValue];
+
         return;
+    }
 
     if (_implementedCDatePickerDelegateMethods & CPDatePicker_validateProposedDateValue_timeInterval)
     {
         // constrain timeInterval also
-        var aStartDateRef = function(x){if (typeof x == 'undefined') return aDateValue; aDateValue = x;}
-        var aTimeIntervalRef = function(x){if (typeof x == 'undefined') return aTimeInterval; aTimeInterval = x;}
+        var aStartDateRef = function(x){if (typeof x == 'undefined') return aDateValue; aDateValue = x;};
+        var aTimeIntervalRef = function(x){if (typeof x == 'undefined') return aTimeInterval; aTimeInterval = x;};
 
         [_delegate datePicker:self validateProposedDateValue:aStartDateRef timeInterval:aTimeIntervalRef];
     }
@@ -331,12 +396,10 @@ CPEraDatePickerElementFlag              = 0x0100;
     _timeInterval = (_datePickerMode == CPSingleDateMode)? 0 : aTimeInterval;
     [self didChangeValueForKey:@"timeInterval"];
 
-    [self sendAction:[self action] to:[self target]];
+    if (_invokedByUserEvent)
+        [self sendAction:[self action] to:[self target]];
 
-    if (_datePickerStyle == CPTextFieldAndStepperDatePickerStyle || _datePickerStyle == CPTextFieldDatePickerStyle)
-        [_datePickerTextfield setDateValue:_dateValue];
-    else
-        [_datePickerCalendar setDateValue:_dateValue];
+    [_datePickerComponent setDateValue:_dateValue];
 }
 
 /*! Set the minDate of the datePicker
@@ -344,6 +407,9 @@ CPEraDatePickerElementFlag              = 0x0100;
 */
 - (void)setMinDate:(CPDate)aMinDate
 {
+    if (_minDate === aMinDate)
+        return;
+
     [self willChangeValueForKey:@"minDate"];
     _minDate = aMinDate;
     [self didChangeValueForKey:@"minDate"];
@@ -356,6 +422,9 @@ CPEraDatePickerElementFlag              = 0x0100;
 */
 - (void)setMaxDate:(CPDate)aMaxDate
 {
+    if (_maxDate === aMaxDate)
+        return;
+
     [self willChangeValueForKey:@"maxDate"];
     _maxDate = aMaxDate;
     [self didChangeValueForKey:@"maxDate"];
@@ -368,8 +437,32 @@ CPEraDatePickerElementFlag              = 0x0100;
 */
 - (void)setDatePickerStyle:(CPInteger)aDatePickerStyle
 {
+    if (_datePickerStyle === aDatePickerStyle)
+        return;
+
     _datePickerStyle = aDatePickerStyle;
 
+    // This is needed in order to specify different theme attributes values for textual / graphical date picker
+    if (_datePickerStyle === CPClockAndCalendarDatePickerStyle)
+        [self setThemeState:CPThemeStateAlternateState];
+    else
+        [self unsetThemeState:CPThemeStateAlternateState];
+
+    // This is needed in order to specify different theme attributes values for with / without stepper textual date picker
+    if (_datePickerStyle === CPTextFieldAndStepperDatePickerStyle)
+        [self setThemeState:CPThemeStateComposedControl];
+    else
+        [self unsetThemeState:CPThemeStateComposedControl];
+
+    [self setControlSize:[self controlSize]];
+
+    if (_datePickerComponent)
+    {
+        // We already have a component so we need to update it
+        [_datePickerComponent resignFirstResponder];
+        [self _createComponents];
+    }
+
     [self setNeedsDisplay:YES];
     [self setNeedsLayout];
 }
@@ -379,8 +472,14 @@ CPEraDatePickerElementFlag              = 0x0100;
 */
 - (void)setDatePickerElements:(CPInteger)aDatePickerElements
 {
+    if (_datePickerElements === aDatePickerElements)
+        return;
+
     _datePickerElements = aDatePickerElements;
 
+    // Notify the component of the new value
+    [_datePickerComponent setDatePickerElements:_datePickerElements];
+
     [self setNeedsDisplay:YES];
     [self setNeedsLayout];
 }
@@ -390,6 +489,9 @@ CPEraDatePickerElementFlag              = 0x0100;
 */
 - (void)setDatePickerMode:(CPInteger)aDatePickerMode
 {
+    if (_datePickerMode === aDatePickerMode)
+        return;
+
     _datePickerMode = aDatePickerMode;
 
     if (_datePickerMode == CPSingleDateMode)
@@ -415,6 +517,9 @@ CPEraDatePickerElementFlag              = 0x0100;
 */
 - (void)setLocale:(CPLocale)aLocale
 {
+    if (_locale === aLocale)
+        return;
+
     _locale = aLocale;
 
     if (_formatter)
@@ -425,7 +530,9 @@ CPEraDatePickerElementFlag              = 0x0100;
     }
 
     // This will update the textFields (usefull when changing with a date with pm and am)
-    [_datePickerTextfield setDateValue:_dateValue];
+    if (_isTextual)
+        [_datePickerComponent setDateValue:_dateValue];
+
     [self setNeedsDisplay:YES];
     [self setNeedsLayout];
 }
@@ -436,6 +543,9 @@ CPEraDatePickerElementFlag              = 0x0100;
 */
 - (void)setBezeled:(BOOL)shouldBeBezeled
 {
+    if (_isBezeled === shouldBeBezeled)
+        return;
+
     _isBezeled = shouldBeBezeled;
 
     if (shouldBeBezeled)
@@ -450,6 +560,9 @@ CPEraDatePickerElementFlag              = 0x0100;
 */
 - (void)setBordered:(BOOL)shouldBeBordered
 {
+    if (_isBordered === shouldBeBordered)
+        return;
+
     _isBordered = shouldBeBordered;
 
     if (shouldBeBordered)
@@ -465,6 +578,22 @@ CPEraDatePickerElementFlag              = 0x0100;
 - (void)setTextFont:(CPFont)aFont
 {
     [self setFont:aFont];
+
+    if (_isTextual)
+        [_datePickerComponent setTextFont:aFont];
+}
+
+/*!
+ Sets the color of the control.
+ @param aColor
+ */
+- (void)setTextColor:(CPColor)aColor
+{
+    [super setTextColor:aColor];
+
+    if (_isTextual)
+        [_datePickerComponent setTextColor:aColor];
+    // REM: in Cocoa, setTextColor has no effect on calendar view
 }
 
 /*! Sets the enabled status of the control. Controls that are not enabled can not be used by the user and obtain the CPThemeStateDisabled theme state.
@@ -474,8 +603,10 @@ CPEraDatePickerElementFlag              = 0x0100;
 {
     [super setEnabled:aBoolean];
 
-    [_datePickerTextfield setEnabled:aBoolean];
-    [_datePickerCalendar setEnabled:aBoolean];
+    [_datePickerComponent setEnabled:aBoolean];
+
+    if (!aBoolean)
+        [self resignFirstResponder];
 }
 
 /*! Set the background color of the datePicker
@@ -492,6 +623,9 @@ CPEraDatePickerElementFlag              = 0x0100;
 */
 - (void)setDrawsBackground:(BOOL)aBoolean
 {
+    if (_drawsBackground === aBoolean)
+        return;
+
     [self willChangeValueForKey:@"drawsBackground"];
     _drawsBackground = aBoolean;
     [self didChangeValueForKey:@"drawsBackground"];
@@ -504,27 +638,37 @@ CPEraDatePickerElementFlag              = 0x0100;
 */
 - (void)setTimeZone:(CPTimeZone)aTimeZone
 {
+    if (_timeZone === aTimeZone)
+        return;
+
     [self willChangeValueForKey:@"timeZone"];
     _timeZone = aTimeZone;
     [self didChangeValueForKey:@"timeZone"];
 
     [self setNeedsLayout];
+
+    [_datePickerComponent setDateValue:_dateValue];
 }
 
 
-#pragma mark -
-#pragma mark First responder methods
+// MARK: -
+// MARK: First responder methods
 
 /*! Return YES if style is set to CPTextFieldAndStepperDatePickerStyle or CPTextFieldDatePickerStyle
 */
 - (BOOL)becomeFirstResponder
 {
-    if (_datePickerStyle == CPTextFieldAndStepperDatePickerStyle || _datePickerStyle == CPTextFieldDatePickerStyle)
-        [_datePickerTextfield _selecteTextFieldWithFlags:[[CPApp currentEvent] modifierFlags]];
-    else
-        return NO;
+    if (_isTextual)
+    {
+        if (![super becomeFirstResponder])
+            return NO;
 
-    return YES;
+        [_datePickerComponent _selectTextFieldWithFlags:[[CPApp currentEvent] modifierFlags]];
+
+        return YES;
+    }
+
+    return NO;
 }
 
 /*! Return YES
@@ -538,15 +682,15 @@ CPEraDatePickerElementFlag              = 0x0100;
 */
 - (BOOL)resignFirstResponder
 {
-    if (_datePickerStyle == CPTextFieldAndStepperDatePickerStyle || _datePickerStyle == CPTextFieldDatePickerStyle)
-        [_datePickerTextfield resignFirstResponder];
+    if (_isTextual)
+        [_datePickerComponent resignFirstResponder];
 
     return YES;
 }
 
 
-#pragma mark -
-#pragma mark getter
+// MARK: -
+// MARK: getter
 
 /*!
     Returns \c YES if the textfield is bezeled.
@@ -579,24 +723,16 @@ CPEraDatePickerElementFlag              = 0x0100;
     return [[_locale objectForKey:CPLocaleCountryCode] isEqualToString:@"US"];
 }
 
-/*! Check if we are in the english format or not. Depending on the locale
-*/
-- (BOOL)_isEnglishFormat
-{
-    return [[_locale objectForKey:CPLocaleLanguageCode] isEqualToString:@"en"];
-}
-
-
-#pragma mark -
-#pragma mark Key event
+// MARK: -
+// MARK: Key event
 
 /*! Key down event
     @param anEvent
 */
 - (void)keyDown:(CPEvent)anEvent
 {
-    if (_datePickerStyle == CPTextFieldAndStepperDatePickerStyle || _datePickerStyle == CPTextFieldDatePickerStyle)
-        [_datePickerTextfield keyDown:anEvent];
+    if (_isTextual)
+        [_datePickerComponent keyDown:anEvent];
 }
 
 @end
@@ -622,19 +758,22 @@ var CPDatePickerModeKey         = @"CPDatePickerModeKey",
 
     if (self)
     {
-        _textFont = [aCoder decodeObjectForKey:CPTextFontKey];
-        _minDate = [aCoder decodeObjectForKey:CPMinDateKey] || [CPDate distantPast];
-        _maxDate = [aCoder decodeObjectForKey:CPMaxDateKey] || [CPDate distantFuture];
-        _timeInterval = [aCoder decodeDoubleForKey:CPIntervalKey];
-        _datePickerMode = [aCoder decodeIntForKey:CPDatePickerModeKey];
-        _datePickerElements = [aCoder decodeIntForKey:CPDatePickerElementsKey];
-        _datePickerStyle = [aCoder decodeIntForKey:CPDatePickerStyleKey];
-        _locale = [aCoder decodeObjectForKey:CPLocaleKey];
-        _dateValue = [aCoder decodeObjectForKey:CPDateValueKey];
         _backgroundColor = [aCoder decodeObjectForKey:CPBackgroundColorKey];
-        _drawsBackground = [aCoder decodeBoolForKey:CPDrawsBackgroundKey];
-        _isBordered = [aCoder decodeBoolForKey:CPBorderedKey];
+        [self setBordered:[aCoder decodeBoolForKey:CPBorderedKey]];
+        [self setDrawsBackground:[aCoder decodeBoolForKey:CPDrawsBackgroundKey]];
+
+        [self setDatePickerElements:[aCoder decodeIntForKey:CPDatePickerElementsKey]];
+        [self setDatePickerMode:[aCoder decodeIntForKey:CPDatePickerModeKey]];
+        [self setDatePickerStyle:[aCoder decodeIntForKey:CPDatePickerStyleKey]];
+        [self setMinDate:[aCoder decodeObjectForKey:CPMinDateKey] || [CPDate distantPast]];
+        [self setMaxDate:[aCoder decodeObjectForKey:CPMaxDateKey] || [CPDate distantFuture]];
+        [self setLocale:[aCoder decodeObjectForKey:CPLocaleKey]];
+
         [self _init];
+
+        [self setTextFont:[aCoder decodeObjectForKey:CPTextFontKey]];
+        [self setTimeInterval:[aCoder decodeDoubleForKey:CPIntervalKey]];
+        [self setDateValue:[aCoder decodeObjectForKey:CPDateValueKey]];
     }
 
     return self
@@ -642,23 +781,30 @@ var CPDatePickerModeKey         = @"CPDatePickerModeKey",
 
 - (void)encodeWithCoder:(CPCoder)aCoder
 {
+    // Before encoding, we remove all subviews as we'll recreate them at loading
+    while ([[self subviews] count] > 0)
+        [[[self subviews] lastObject] removeFromSuperview];
+
     [super encodeWithCoder:aCoder];
+
     [aCoder encodeDouble:_timeInterval forKey:CPIntervalKey];
     [aCoder encodeInt:_datePickerMode forKey:CPDatePickerModeKey];
     [aCoder encodeInt:_datePickerStyle forKey:CPDatePickerStyleKey];
     [aCoder encodeInt:_datePickerElements forKey:CPDatePickerElementsKey];
     [aCoder encodeObject:_minDate forKey:CPMinDateKey];
-    [aCoder encodeObject:_maxDate forKey:CPMaxDateKey]
-    [aCoder encodeObject:_dateValue forKey:CPDateValueKey];;
+    [aCoder encodeObject:_maxDate forKey:CPMaxDateKey];
+    [aCoder encodeObject:_dateValue forKey:CPDateValueKey];
     [aCoder encodeObject:_textFont forKey:CPTextFontKey];
     [aCoder encodeObject:_locale forKey:CPLocaleKey];
     [aCoder encodeObject:_backgroundColor forKey:CPBackgroundColorKey];
     [aCoder encodeObject:_drawsBackground forKey:CPDrawsBackgroundKey];
     [aCoder encodeObject:_isBordered forKey:CPBorderedKey];
+
 }
 
 @end
 
+// FIXME: add support for CPEditorRegistrationProtocol as implemented for CPTextField
 @implementation _CPDatePickerValueBinder : CPBinder
 {
 }

AppKit/CPDatePicker/_CPDatePickerBox.j

@@ -0,0 +1,98 @@
+/* _CPDatePickerBox.j
+* AppKit
+*
+* Created by Alexandre Wilhelm
+* Copyright 2012 <alexandre.wilhelmfr@gmail.com>
+*
+* This library is free software; you can redistribute it and/or
+* modify it under the terms of the GNU Lesser General Public
+* License as published by the Free Software Foundation; either
+* version 2.1 of the License, or (at your option) any later version.
+*
+* This library is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+* Lesser General Public License for more details.
+*
+* You should have received a copy of the GNU Lesser General Public
+* License along with this library; if not, write to the Free Software
+* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
+*/
+
+@import <Foundation/Foundation.j>
+@import "CPView.j"
+
+@class CPDatePicker
+
+@implementation _CPDatePickerBox : CPView
+{
+    CPDatePicker _datePicker @accessors(property=datePicker);
+}
+
+- (void)drawRect:(CGRect)aRect
+{
+    [super drawRect:aRect];
+
+    if ([_datePicker isCSSBased])
+        return;
+
+    if ([_datePicker isBordered])
+    {
+        var context = [[CPGraphicsContext currentContext] graphicsPort],
+            borderWidth = [_datePicker valueForThemeAttribute:@"border-width"] / 2;
+
+        CGContextBeginPath(context);
+        CGContextSetStrokeColor(context, [_datePicker valueForThemeAttribute:@"border-color" inState:[_datePicker themeState]]);
+        CGContextSetLineWidth(context,  [_datePicker valueForThemeAttribute:@"border-width"]);
+
+        CGContextMoveToPoint(context, borderWidth, borderWidth);
+        CGContextAddLineToPoint(context, aRect.size.width - borderWidth, borderWidth);
+        CGContextAddLineToPoint(context, aRect.size.width - borderWidth, aRect.size.height - borderWidth);
+        CGContextAddLineToPoint(context, borderWidth, aRect.size.height - borderWidth);
+        CGContextAddLineToPoint(context, borderWidth,borderWidth);
+
+        CGContextStrokePath(context);
+        CGContextClosePath(context);
+    }
+}
+
+- (CGRect)rectForEphemeralSubviewNamed:(CPString)aName
+{
+    if (aName === "bezel-view")
+        return [self bounds];
+
+    return [super rectForEphemeralSubviewNamed:aName];
+}
+
+- (CPView)createEphemeralSubviewNamed:(CPString)aName
+{
+    if (aName === "bezel-view")
+    {
+        var view = [[CPView alloc] initWithFrame:CGRectMakeZero()];
+
+        [view setHitTests:NO];
+
+        return view;
+    }
+
+    return [super createEphemeralSubviewNamed:aName];
+}
+
+- (void)layoutSubviews
+{
+    if ([_datePicker isCSSBased])
+    {
+        var bezelView = [self layoutEphemeralSubviewNamed:@"bezel-view"
+                                               positioned:CPWindowBelow
+                          relativeToEphemeralSubviewNamed:nil];
+
+        [bezelView setBackgroundColor:[_datePicker currentValueForThemeAttribute:@"bezel-color"]];
+    }
+
+    if ([_datePicker drawsBackground])
+        [self setBackgroundColor:[_datePicker backgroundColor]];
+    else
+        [self setBackgroundColor:[CPColor clearColor]];
+}
+
+@end

AppKit/CPDatePicker/_CPDatePickerClock.j

@@ -20,14 +20,18 @@
 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
 */
 
+@import <Foundation/CPKeyedArchiver.j>
+@import <Foundation/CPKeyedUnarchiver.j>
 @import "CPView.j"
 @import "CPTextField.j"
-@import "CPImageView.j"
+@import "CPImage.j"
 @import "CALayer.j"
 
-
 @class _CPCibCustomResource
 @class CPDatePicker
+@class HandImageLayer
+@class HoursLayer
+@class HandLayer
 
 @global CPHourMinuteSecondDatePickerElementFlag
 @global CPTextFieldAndStepperDatePickerStyle
@@ -35,28 +39,48 @@
 
 var RADIANS = Math.PI / 180;
 
+@typedef _CPDatePickerClockHand
+_CPDatePickerClockHours   = 1;
+_CPDatePickerClockMinutes = 2;
+_CPDatePickerClockSeconds = 3;
 
-@implementation _CPDatePickerClock : CPView
+@implementation _CPDatePickerClock : CPControl
 {
-    BOOL            _isEnabled;
-    CALayer         _rootLayer;
-    CALayer         _hourHandLayer;
-    CALayer         _minuteHandLayer;
-    CALayer         _secondHandLayer;
-    CALayer         _middleHandLayer;
-    CPDatePicker    _datePicker;
-    CPTextField     _PMAMTextField;
+    BOOL                    _isEnabled;
+    HoursLayer              _rootLayer;
+    HandLayer               _hourHandLayer;
+    HandLayer               _minuteHandLayer;
+    HandLayer               _secondHandLayer;
+    CALayer                 _middleHandLayer;
+    CPDatePicker            _datePicker;
+    CPTextField             _PMAMTextField;
+
+    CALayer                 _currentHandLayer;
+    _CPDatePickerClockHand  _currentHand;
+    CPInteger               _currentRepresentedValue;
+    float                   _currentValueShift;
+    CPInteger               _numberOfUnits;
+    BOOL                    _trackingHand;
+
+    CPInteger               _representedHours;
+    CPInteger               _representedMinutes;
+    CPInteger               _representedSeconds;
+    BOOL                    _representedHourIsPM;
+
+    CPInteger                _datePickerElements         @accessors(getter=datePickerElements);
 }
 
 
-#pragma mark -
-#pragma mark Init methods
+// MARK: -
+// MARK: Init methods
 
 - (id)initWithFrame:(CGRect)aFrame datePicker:(CPDatePicker)aDatePicker
 {
     if (self = [super initWithFrame:aFrame])
     {
-        _datePicker = aDatePicker;
+        _datePicker         = aDatePicker;
+        _datePickerElements = [_datePicker datePickerElements];
+        _trackingHand       = NO;
 
         _PMAMTextField = [[CPTextField alloc] initWithFrame:CGRectMakeZero()];
 
@@ -74,7 +98,7 @@ var RADIANS = Math.PI / 180;
 
         var middleHandSize = [_datePicker valueForThemeAttribute:@"middle-hand-size"],
             minuteHandSize = [_datePicker valueForThemeAttribute:@"minute-hand-size"],
-            hourHandSize = [_datePicker valueForThemeAttribute:@"hour-hand-size"],
+            hourHandSize   = [_datePicker valueForThemeAttribute:@"hour-hand-size"],
             secondHandSize = [_datePicker valueForThemeAttribute:@"second-hand-size"];
 
         // We use layer to make the rotation possible
@@ -98,106 +122,132 @@ var RADIANS = Math.PI / 180;
         [_middleHandLayer setAnchorPoint:CGPointMakeZero()];
         [_middleHandLayer setPosition:CGPointMake(0.0, 0.0)];
 
-        _rootLayer = [CALayer layer];
+        _rootLayer = [[HoursLayer alloc] init];
         [self setWantsLayer:YES];
         [self setLayer:_rootLayer];
 
-        [_hourHandLayer setNeedsDisplay];
-        [_middleHandLayer setNeedsDisplay];
-        [_secondHandLayer setNeedsDisplay];
-        [_minuteHandLayer setNeedsDisplay];
+        [self _initHands];
 
         [_rootLayer addSublayer:_hourHandLayer];
         [_rootLayer addSublayer:_minuteHandLayer];
-        [_rootLayer addSublayer:_secondHandLayer];
-        [_rootLayer addSublayer:_middleHandLayer];
 
+        if ([_datePicker valueForThemeAttribute:@"clock-second-hand-over"])
+        {
+            [_rootLayer addSublayer:_middleHandLayer];
+            [_rootLayer addSublayer:_secondHandLayer];
+        }
+        else
+        {
+            [_rootLayer addSublayer:_secondHandLayer];
+            [_rootLayer addSublayer:_middleHandLayer];
+        }
+
+        [_rootLayer setDrawsHours:[_datePicker valueForThemeAttribute:@"clock-draws-hours"]];
         [_rootLayer setNeedsDisplay];
     }
 
     return self;
 }
 
-
-#pragma mark -
-#pragma mark Layout methods
-
-- (void)layoutSubviews
+- (void)_initHands
 {
-    if ([_datePicker datePickerStyle] == CPTextFieldAndStepperDatePickerStyle || [_datePicker datePickerStyle] == CPTextFieldDatePickerStyle)
-        return;
+    var middleHandImage = [_datePicker currentValueForThemeAttribute:@"middle-hand-image"],
+        hourHandImage   = [_datePicker currentValueForThemeAttribute:@"hour-hand-image"],
+        minuteHandImage = [_datePicker currentValueForThemeAttribute:@"minute-hand-image"],
+        secondHandImage = [_datePicker currentValueForThemeAttribute:@"second-hand-image"];
 
-    [super layoutSubviews];
+    // If hand images are true CPImage, we have to duplicate them to avoid
+    // the multiple delegates bug when multiple clocks are displayed
 
-    var bounds = [self bounds],
-        dateValue = [[_datePicker dateValue] copy];
+    if ([middleHandImage isKindOfClass:[CPImage class]])
+        middleHandImage = [middleHandImage duplicate];
 
-    [dateValue _dateWithTimeZone:[_datePicker timeZone]];
+    if ([hourHandImage isKindOfClass:[CPImage class]])
+        hourHandImage = [hourHandImage duplicate];
 
-    [self setBackgroundColor:[_datePicker currentValueForThemeAttribute:@"bezel-color-clock"]];
-    [_middleHandLayer setImage:[_datePicker currentValueForThemeAttribute:@"middle-hand-image"]];
-    [_hourHandLayer setImage:[_datePicker currentValueForThemeAttribute:@"hour-hand-image"]];
-    [_minuteHandLayer setImage:[_datePicker currentValueForThemeAttribute:@"minute-hand-image"]];
-    [_secondHandLayer setImage:[_datePicker currentValueForThemeAttribute:@"second-hand-image"]];
+    if ([minuteHandImage isKindOfClass:[CPImage class]])
+        minuteHandImage = [minuteHandImage duplicate];
 
-    if ([_datePicker _isEnglishFormat])
-    {
-        if (dateValue.getHours() > 11)
-            [_PMAMTextField setStringValue:@"PM"]
-        else
-            [_PMAMTextField setStringValue:@"AM"];
+    if ([secondHandImage isKindOfClass:[CPImage class]])
+        secondHandImage = [secondHandImage duplicate];
 
-        [_PMAMTextField sizeToFit];
-        [_PMAMTextField setFrameOrigin:CGPointMake(bounds.size.width / 2 - [_PMAMTextField frameSize].width / 2, bounds.size.height / 2 + 15)];
-        [_PMAMTextField setHidden:NO];
-    }
-    else
-    {
-        [_PMAMTextField setHidden:YES];
-    }
+    [_middleHandLayer setImage:middleHandImage];
+    [_hourHandLayer   setImage:hourHandImage];
+    [_minuteHandLayer setImage:minuteHandImage];
+    [_secondHandLayer setImage:secondHandImage];
 
-    [_hourHandLayer setRotationRadians:[self _hourPositionRadianForDate:dateValue]];
-    [_minuteHandLayer setRotationRadians:[self _minutePositionRadianForDate:dateValue]];
-    [_secondHandLayer setRotationRadians:[self _secondPositionRadianForDate:dateValue]];
+    [_hourHandLayer   setNeedsDisplay];
+    [_middleHandLayer setNeedsDisplay];
+    [_secondHandLayer setNeedsDisplay];
+    [_minuteHandLayer setNeedsDisplay];
 
-    [_PMAMTextField setEnabled:_isEnabled];
-    [_hourHandLayer setEnabled:_isEnabled];
-    [_middleHandLayer setEnabled:_isEnabled];
-    [_secondHandLayer setEnabled:_isEnabled];
-    [_minuteHandLayer setEnabled:_isEnabled];
-
-    // Check if we have to display the hand second
-    if (([_datePicker datePickerElements] & CPHourMinuteSecondDatePickerElementFlag) == CPHourMinuteSecondDatePickerElementFlag)
-        [_secondHandLayer setHidden:NO];
-    else
-        [_secondHandLayer setHidden:YES];
+    [_rootLayer setFont:[_datePicker currentValueForThemeAttribute:@"clock-hours-font"]];
+    [_rootLayer setTextColor:[_datePicker currentValueForThemeAttribute:@"clock-hours-text-color"]];
+    [_rootLayer setRadius:[_datePicker currentValueForThemeAttribute:@"clock-hours-radius"]];
 
     [_rootLayer setNeedsDisplay];
 }
 
-
-#pragma mark -
-#pragma mark Accessors
-
-- (float)_hourPositionRadianForDate:(CPDate)aDate
+- (void)setDatePickerElements:(CPInteger)aDatePickerElements
 {
-    var hours = aDate.getHours() + aDate.getMinutes() / 60;
+    _datePickerElements = aDatePickerElements;
 
-    return (360 * hours / 12) * RADIANS;
+    // Check if we have to display the hand second
+    // FIXME: Don't know why but next line will cause theme compilation to fail...
+    // Workaround: added "if PLATFORM(DOM)"
+#if PLATFORM(DOM)
+    [_secondHandLayer setHidden:!((_datePickerElements & CPHourMinuteSecondDatePickerElementFlag) == CPHourMinuteSecondDatePickerElementFlag)];
+#endif
 }
 
-- (float)_secondPositionRadianForDate:(CPDate)aDate
+// MARK: Layout methods
+
+- (void)layoutSubviews
 {
-    return (360 * aDate.getSeconds() / 60) * RADIANS;
+    // While tracking a hand, we don't want the whole thing to be relayouted at each mouse movement
+    if (_trackingHand)
+        return;
+
+    [self setBackgroundColor:[_datePicker currentValueForThemeAttribute:@"bezel-color-clock"]];
+
+    var dateValue = [[_datePicker dateValue] copy];
+
+    [dateValue _dateWithTimeZone:[_datePicker timeZone]];
+
+    _representedHours    = dateValue.getHours();
+    _representedMinutes  = dateValue.getMinutes();
+    _representedSeconds  = dateValue.getSeconds();
+    _representedHourIsPM = (_representedHours > 11);
+
+    // Hours are expressed in 24 hours format, we need 12 hours format
+    _representedHours -= (_representedHourIsPM ? 12 : 0);
+
+    [self _updateHands];
+
+    // FIXME: Workaround. Seems that CALayer doesn't redraw without an event
+    [CALayer runLoopUpdateLayers];
 }
 
-- (float)_minutePositionRadianForDate:(CPDate)aDate
+- (void)_updateHands
 {
-    var minutes = aDate.getMinutes() + aDate.getSeconds() / 60;
+    var bounds = [self bounds];
 
-    return (360 * minutes / 60) * RADIANS;
+    [_PMAMTextField setStringValue:_representedHourIsPM ? @"PM" : @"AM"];
+    [_PMAMTextField sizeToFit];
+    [_PMAMTextField setFrameOrigin:CGPointMake(bounds.size.width / 2 - [_PMAMTextField frameSize].width / 2, bounds.size.height / 2 + 15)];
+
+    [_hourHandLayer   setRotationRadians:(360 * (_representedHours   + _representedMinutes / 60) / 12) * RADIANS];
+    [_minuteHandLayer setRotationRadians:(360 * (_representedMinutes + _representedSeconds / 60) / 60) * RADIANS];
+    [_secondHandLayer setRotationRadians:(360 * _representedSeconds / 60) * RADIANS];
+
+    [_hourHandLayer   setNeedsDisplay];
+    [_minuteHandLayer setNeedsDisplay];
+    [_secondHandLayer setNeedsDisplay];
+//    [_middleHandLayer setNeedsDisplay];
 }
 
+// MARK: Accessors
+
 - (void)setEnabled:(BOOL)shouldEnable
 {
     shouldEnable = !!shouldEnable;
@@ -206,36 +256,191 @@ var RADIANS = Math.PI / 180;
         return;
 
     _isEnabled = shouldEnable;
-    [self setNeedsLayout];
 
-    // FIXME: This is a workaround for an apparent bug in CALayer.
-    // Without pumping the event loop, the sublayers of _rootLayer
-    // (the hands) are not redrawn until an event occurs.
-    [[CPRunLoop currentRunLoop] limitDateForMode:CPDefaultRunLoopMode];
+    [self _initHands];
+    [self setNeedsLayout];
+}
+
+// MARK: Mouse actions
+
+- (void)mouseDown:(CPEvent)anEvent
+{
+    if (!_isEnabled)
+        return;
+
+    var currentLocation = [self convertPoint:[anEvent locationInWindow] fromView:nil];
+
+    if ([_secondHandLayer handIsHitAtPoint:currentLocation])
+    {
+        _currentHandLayer        = _secondHandLayer;
+        _currentHand             = _CPDatePickerClockSeconds;
+        _currentRepresentedValue = _representedSeconds;
+        _currentValueShift       = 0;
+        _numberOfUnits           = 60;
+    }
+    else if ([_minuteHandLayer handIsHitAtPoint:currentLocation])
+    {
+        _currentHandLayer        = _minuteHandLayer;
+        _currentHand             = _CPDatePickerClockMinutes;
+        _currentRepresentedValue = _representedMinutes;
+        _currentValueShift       = _representedSeconds / 60;
+        _numberOfUnits           = 60;
+    }
+    else if ([_hourHandLayer handIsHitAtPoint:currentLocation])
+    {
+        _currentHandLayer        = _hourHandLayer;
+        _currentHand             = _CPDatePickerClockHours;
+        _currentRepresentedValue = _representedHours;
+        _currentValueShift       = _representedMinutes / 60;
+        _numberOfUnits           = 12;
+    }
+    else
+    {
+        _currentHandLayer        = nil;
+        _currentHand             = CPNotFound;
+        _currentRepresentedValue = CPNotFound;
+        _currentValueShift       = CPNotFound;
+        _numberOfUnits           = CPNotFound;
+    }
+
+    if (_currentHandLayer)
+        [self trackMouse:anEvent];
+}
+
+- (BOOL)tracksMouseOutsideOfFrame
+{
+    return YES;
+}
+
+- (BOOL)startTrackingAt:(CGPoint)aPoint
+{
+    _trackingHand = YES;
+
+    return YES;
+}
+
+- (BOOL)continueTracking:(CGPoint)lastPoint at:(CGPoint)aPoint
+{
+    var dx    = aPoint.x -_bounds.size.width / 2,
+        dy    = _bounds.size.height / 2 - aPoint.y,
+        angle = (PI_2 - ATAN2(dy,dx) + PI2) % PI2,
+        value = ROUND(angle * _numberOfUnits / PI2 - _currentValueShift) % _numberOfUnits;
+
+    if (value !== _currentRepresentedValue)
+    {
+        var movedForward  = (_currentRepresentedValue > _numberOfUnits * 3/4) && (value < _numberOfUnits / 4),
+            movedBackward = (_currentRepresentedValue < _numberOfUnits / 4)   && (value > _numberOfUnits * 3/4),
+            dateValue     = [[_datePicker dateValue] copy];
+
+        [dateValue _dateWithTimeZone:[_datePicker timeZone]];
+
+        switch (_currentHand)
+        {
+            case _CPDatePickerClockHours:
+
+                if (movedForward || movedBackward)
+                {
+                    _representedHourIsPM = !_representedHourIsPM;
+
+                    if (movedForward && !_representedHourIsPM)
+                        // Day++
+                        dateValue.setDate(dateValue.getDate() + 1);
+
+                    else if (movedBackward && _representedHourIsPM)
+                        // Day--
+                        dateValue.setDate(dateValue.getDate() - 1);
+                }
+
+                dateValue.setHours(value + (_representedHourIsPM ? 12 : 0));
+                break;
+
+            case _CPDatePickerClockMinutes:
+
+                if (movedForward)
+                    // Hours++
+                    dateValue.setHours(dateValue.getHours() + 1);
+
+                else if (movedBackward)
+                    // Hours--
+                    dateValue.setHours(dateValue.getHours() - 1);
+
+                dateValue.setMinutes(value);
+                break;
+
+            case _CPDatePickerClockSeconds:
+
+                if (movedForward)
+                    // Minutes++
+                    dateValue.setMinutes(dateValue.getMinutes() + 1);
+
+                else if (movedBackward)
+                    // Minutes--
+                    dateValue.setMinutes(dateValue.getMinutes() - 1);
+
+                dateValue.setSeconds(value);
+                break;
+        }
+
+#if PLATFORM(DOM)
+        _datePicker._invokedByUserEvent = YES;
+#endif
+        [_datePicker _setDateValue:dateValue timeInterval:[_datePicker timeInterval]];
+#if PLATFORM(DOM)
+        _datePicker._invokedByUserEvent = NO;
+#endif
+
+        // We have to adapt represented values
+        _representedHours    = dateValue.getHours();
+        _representedMinutes  = dateValue.getMinutes();
+        _representedSeconds  = dateValue.getSeconds();
+        _representedHourIsPM = (_representedHours > 11);
+
+        // Hours are expressed in 24 hours format, we need 12 hours format
+        _representedHours -= (_representedHourIsPM ? 12 : 0);
+
+        switch (_currentHand) {
+            case _CPDatePickerClockHours:
+                _currentRepresentedValue = _representedHours;
+                break;
+
+            case _CPDatePickerClockMinutes:
+                _currentRepresentedValue = _representedMinutes;
+                break;
+
+            case _CPDatePickerClockSeconds:
+                _currentRepresentedValue = _representedSeconds;
+                break;
+        }
+
+        [self _updateHands];
+    }
+
+    return YES;
+}
+
+- (void)stopTracking:(CGPoint)lastPoint at:(CGPoint)aPoint mouseIsUp:(BOOL)mouseIsUp
+{
+    _trackingHand = NO;
 }
 
 @end
 
+// MARK: -
 
 @implementation HandLayer : CALayer
 {
-    BOOL    _isEnabled      @accessors(setter=setEnabled:, getter=isEnabled);
-
-    CPImage _image;
-    CALayer _imageLayer;
-    float   _rotationRadians;
+    CPImage         _image;
+    HandImageLayer  _imageLayer;
+    float           _rotationRadians;
 }
 
-
-#pragma mark -
-#pragma mark Init methods
+// MARK: Init methods
 
 - (id)initWithSize:(CGSize)aSize
 {
     if (self = [super init])
     {
-        _isEnabled = YES;
-        _imageLayer = [CALayer layer];
+        _imageLayer = [HandImageLayer layer];
         _rotationRadians = 0;
 
         [_imageLayer setDelegate:self];
@@ -248,8 +453,7 @@ var RADIANS = Math.PI / 180;
 }
 
 
-#pragma mark -
-#pragma mark Setter Getter methods
+// MARK: Setter Getter methods
 
 /*!
     Set the bounds of the layer. The imageLayer will be at the center of this bounds.
@@ -286,18 +490,6 @@ var RADIANS = Math.PI / 180;
         1.0, 1.0)];
 }
 
-- (void)setEnabled:(BOOL)shouldEnable
-{
-    shouldEnable = !!shouldEnable;
-
-    if (_isEnabled === shouldEnable)
-        return;
-
-    _isEnabled = shouldEnable;
-    [self setNeedsDisplay];
-    [_imageLayer setNeedsDisplay];
-}
-
 - (void)imageDidLoad:(CPImage)anImage
 {
     [_imageLayer setNeedsDisplay];
@@ -311,4 +503,109 @@ var RADIANS = Math.PI / 180;
         CGContextDrawImage(aContext, [aLayer bounds], _image);
 }
 
+- (BOOL)handIsHitAtPoint:(CGPoint)aPoint
+{
+    return (!_isHidden && [_imageLayer hitTest:aPoint] === _imageLayer);
+}
+
+- (void)setNeedsDisplay
+{
+    [super       setNeedsDisplay];
+    [_imageLayer setNeedsDisplay];
+}
+
+@end
+
+// MARK: -
+
+@implementation HandImageLayer : CALayer
+{
+    CGRect  _handBounds;
+}
+
+// We have to adapt hitTest so it only takes the hand into account (that's the top half of the image layer)
+// We are also sure there's no sublayers
+- (CALayer)hitTest:(CGPoint)aPoint
+{
+    if (_isHidden)
+        return nil;
+
+    var point = CGPointApplyAffineTransform(aPoint, _transformToLayer);
+
+    return CGRectContainsPoint(_handBounds, point) ? self : nil;
+}
+
+- (void)setBounds:(CGRect)aBounds
+{
+    if (CGRectEqualToRect(_bounds, aBounds))
+        return;
+
+    _handBounds = CGRectMakeCopy(aBounds);
+
+    _handBounds.size.height = _handBounds.size.height / 2;
+
+    [super setBounds:aBounds];
+}
+
+
+@end
+
+// MARK: -
+
+@implementation HoursLayer : CALayer
+{
+    BOOL    _drawsHours;
+
+    CPFont  _font           @accessors(property=font);
+    CPColor _textColor      @accessors(property=textColor);
+    float   _radius         @accessors(property=radius);
+}
+
+
+- (id)init
+{
+    if (self = [super init])
+    {
+        _drawsHours = NO;
+    }
+
+    return self;
+}
+
+- (void)setDrawsHours:(BOOL)shouldDrawHours
+{
+    shouldDrawHours = !!shouldDrawHours;
+
+    if (_drawsHours === shouldDrawHours)
+        return;
+
+    _drawsHours = shouldDrawHours;
+    [self setNeedsDisplay];
+}
+
+- (void)drawInContext:(CGContext)aContext
+{
+    [super drawInContext:aContext];
+
+    if (_drawsHours)
+    {
+        var bounds = [self bounds],
+            centerX = bounds.size.width / 2,
+            centerY = bounds.size.height / 2;
+
+        CGContextSelectFont(aContext, _font);
+        CGContextSetFillColor(aContext, _textColor);
+        aContext.textBaseline = @"middle";
+        aContext.textAlign = @"center";
+
+        for (var i = 1, angle = 60.0, x, y; i < 13; i++, angle -= 30.0)
+        {
+            x = centerX + _radius * COS(angle * RADIANS);
+            y = centerY - _radius * SIN(angle * RADIANS);
+
+            aContext.fillText(i, x, y);
+        }
+    }
+}
+
 @end

AppKit/CPDatePicker/_CPDatePickerDayView.j

@@ -0,0 +1,280 @@
+/* _CPDatePickerDayView.j
+* AppKit
+*
+* Created by Alexandre Wilhelm
+* Copyright 2012 <alexandre.wilhelmfr@gmail.com>
+*
+* This library is free software; you can redistribute it and/or
+* modify it under the terms of the GNU Lesser General Public
+* License as published by the Free Software Foundation; either
+* version 2.1 of the License, or (at your option) any later version.
+*
+* This library is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+* Lesser General Public License for more details.
+*
+* You should have received a copy of the GNU Lesser General Public
+* License along with this library; if not, write to the Free Software
+* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
+*/
+
+@import <Foundation/Foundation.j>
+
+@import "_CPDatePickerDayViewTextField.j"
+
+@class CPDatePicker
+
+@implementation _CPDatePickerDayView : CPControl
+{
+    CPDate          _date @accessors(property=date);
+
+    BOOL            _isDisabled;
+    BOOL            _isHighlighted;
+    BOOL            _isSelected;
+    CPDatePicker    _datePicker;
+    CPTextField     _textField;
+
+    CPInteger       _dayInWeek      @accessors(property=dayInWeek);
+    BOOL            _firstSelected  @accessors(property=firstSelected);
+    BOOL            _lastSelected   @accessors(property=lastSelected);
+}
+
+
+// MARK: Init methods
+
+/*! Create a new instance of _CPDatePickerDayView
+    @param aFrame
+    @param aDatePicker
+    @return a new instance of _CPDatePickerDayView
+*/
+- (id)initWithFrame:(CGRect)aFrame withDatePicker:(CPDatePicker)aDatePicker
+{
+    if (self = [super initWithFrame:aFrame])
+    {
+        [self setHitTests:NO];
+
+        _datePicker = aDatePicker;
+
+        // FIXME: Beginning with Aristo3, the text field is directly themed based on a new class _CPDatePickerDayViewTextField
+        if ([self isCSSBased])
+        {
+            _textField = [[_CPDatePickerDayViewTextField alloc] initWithFrame:aFrame];
+        }
+        else
+        {
+            _textField = [[CPTextField alloc] initWithFrame:aFrame];
+
+            [_textField setValue:[_datePicker valueForThemeAttribute:@"tile-text-alignment"] forThemeAttribute:@"alignment"];
+            [_textField setValue:[_datePicker valueForThemeAttribute:@"tile-vertical-alignment"] forThemeAttribute:@"vertical-alignment"];
+
+            var contentInset = [_datePicker valueForThemeAttribute:@"tile-content-inset"];
+
+            if (contentInset)
+                [_textField setValue:contentInset forThemeAttribute:@"content-inset"];
+
+            [_textField setValue:[_datePicker valueForThemeAttribute:@"tile-font" inState:CPThemeStateNormal] forThemeAttribute:@"font" inState:CPThemeStateNormal];
+            [_textField setValue:[_datePicker valueForThemeAttribute:@"tile-text-color" inState:CPThemeStateNormal] forThemeAttribute:@"text-color" inState:CPThemeStateNormal];
+            [_textField setValue:[_datePicker valueForThemeAttribute:@"tile-text-shadow-color" inState:CPThemeStateNormal] forThemeAttribute:@"text-shadow-color" inState:CPThemeStateNormal];
+            [_textField setValue:[_datePicker valueForThemeAttribute:@"tile-text-shadow-offset" inState:CPThemeStateNormal] forThemeAttribute:@"text-shadow-offset" inState:CPThemeStateNormal];
+
+            [_textField setValue:[_datePicker valueForThemeAttribute:@"tile-font" inState:CPThemeStateSelected] forThemeAttribute:@"font" inState:CPThemeStateSelected];
+            [_textField setValue:[_datePicker valueForThemeAttribute:@"tile-text-color" inState:CPThemeStateSelected] forThemeAttribute:@"text-color" inState:CPThemeStateSelected];
+            [_textField setValue:[_datePicker valueForThemeAttribute:@"tile-text-shadow-color" inState:CPThemeStateSelected] forThemeAttribute:@"text-shadow-color" inState:CPThemeStateSelected];
+            [_textField setValue:[_datePicker valueForThemeAttribute:@"tile-text-shadow-offset" inState:CPThemeStateSelected] forThemeAttribute:@"text-shadow-offset" inState:CPThemeStateSelected];
+
+            [_textField setValue:[_datePicker valueForThemeAttribute:@"tile-font" inState:CPThemeStateDisabled] forThemeAttribute:@"font" inState:CPThemeStateDisabled];
+            [_textField setValue:[_datePicker valueForThemeAttribute:@"tile-text-color" inState:CPThemeStateDisabled] forThemeAttribute:@"text-color" inState:CPThemeStateDisabled];
+            [_textField setValue:[_datePicker valueForThemeAttribute:@"tile-text-shadow-color" inState:CPThemeStateDisabled] forThemeAttribute:@"text-shadow-color" inState:CPThemeStateDisabled];
+            [_textField setValue:[_datePicker valueForThemeAttribute:@"tile-text-shadow-offset" inState:CPThemeStateDisabled] forThemeAttribute:@"text-shadow-offset" inState:CPThemeStateDisabled];
+
+            [_textField setValue:[_datePicker valueForThemeAttribute:@"tile-font" inStates:[CPThemeStateDisabled, CPThemeStateSelected]] forThemeAttribute:@"font" inStates:[CPThemeStateDisabled, CPThemeStateSelected]];
+            [_textField setValue:[_datePicker valueForThemeAttribute:@"tile-text-color" inStates:[CPThemeStateDisabled, CPThemeStateSelected]]forThemeAttribute:@"text-color" inStates:[CPThemeStateDisabled, CPThemeStateSelected]];
+            [_textField setValue:[_datePicker valueForThemeAttribute:@"tile-text-shadow-color" inStates:[CPThemeStateDisabled, CPThemeStateSelected]] forThemeAttribute:@"text-shadow-color" inStates:[CPThemeStateDisabled, CPThemeStateSelected]];
+            [_textField setValue:[_datePicker valueForThemeAttribute:@"tile-text-shadow-offset" inStates:[CPThemeStateDisabled, CPThemeStateSelected]] forThemeAttribute:@"text-shadow-offset" inStates:[CPThemeStateDisabled, CPThemeStateSelected]];
+
+            [_textField setValue:[_datePicker valueForThemeAttribute:@"tile-font" inState:CPThemeStateHighlighted] forThemeAttribute:@"font" inState:CPThemeStateHighlighted];
+            [_textField setValue:[_datePicker valueForThemeAttribute:@"tile-text-color" inState:CPThemeStateHighlighted] forThemeAttribute:@"text-color" inState:CPThemeStateHighlighted];
+            [_textField setValue:[_datePicker valueForThemeAttribute:@"tile-text-shadow-color" inState:CPThemeStateHighlighted] forThemeAttribute:@"text-shadow-color" inState:CPThemeStateHighlighted];
+            [_textField setValue:[_datePicker valueForThemeAttribute:@"tile-text-shadow-offset" inState:CPThemeStateHighlighted] forThemeAttribute:@"text-shadow-offset" inState:CPThemeStateHighlighted];
+
+            [_textField setValue:[_datePicker valueForThemeAttribute:@"tile-font" inStates:[CPThemeStateHighlighted, CPThemeStateSelected]] forThemeAttribute:@"font" inStates:[CPThemeStateHighlighted, CPThemeStateSelected]];
+            [_textField setValue:[_datePicker valueForThemeAttribute:@"tile-text-color" inStates:[CPThemeStateHighlighted, CPThemeStateSelected]] forThemeAttribute:@"text-color" inStates:[CPThemeStateHighlighted, CPThemeStateSelected]];
+            [_textField setValue:[_datePicker valueForThemeAttribute:@"tile-text-shadow-color" inStates:[CPThemeStateHighlighted, CPThemeStateSelected]] forThemeAttribute:@"text-shadow-color" inStates:[CPThemeStateHighlighted, CPThemeStateSelected]];
+            [_textField setValue:[_datePicker valueForThemeAttribute:@"tile-text-shadow-offset" inStates:[CPThemeStateHighlighted, CPThemeStateSelected]] forThemeAttribute:@"text-shadow-offset" inStates:[CPThemeStateHighlighted, CPThemeStateSelected]];
+
+            [_textField setValue:[_datePicker valueForThemeAttribute:@"tile-font" inStates:[CPThemeStateDisabled, CPThemeStateHighlighted, CPThemeStateSelected]] forThemeAttribute:@"font" inStates:[CPThemeStateDisabled, CPThemeStateHighlighted, CPThemeStateSelected]];
+            [_textField setValue:[_datePicker valueForThemeAttribute:@"tile-text-color" inStates:[CPThemeStateDisabled, CPThemeStateHighlighted, CPThemeStateSelected]] forThemeAttribute:@"text-color" inStates:[CPThemeStateDisabled, CPThemeStateHighlighted, CPThemeStateSelected]];
+            [_textField setValue:[_datePicker valueForThemeAttribute:@"tile-text-shadow-color" inStates:[CPThemeStateDisabled, CPThemeStateHighlighted, CPThemeStateSelected]] forThemeAttribute:@"text-shadow-color" inStates:[CPThemeStateDisabled, CPThemeStateHighlighted, CPThemeStateSelected]];
+            [_textField setValue:[_datePicker valueForThemeAttribute:@"tile-text-shadow-offset" inStates:[CPThemeStateDisabled, CPThemeStateHighlighted, CPThemeStateSelected]] forThemeAttribute:@"text-shadow-offset" inStates:[CPThemeStateDisabled, CPThemeStateHighlighted, CPThemeStateSelected]];
+
+            [_textField setValue:[_datePicker valueForThemeAttribute:@"tile-font" inStates:[CPThemeStateDisabled, CPThemeStateHighlighted]] forThemeAttribute:@"font" inStates:[CPThemeStateDisabled, CPThemeStateHighlighted]];
+            [_textField setValue:[_datePicker valueForThemeAttribute:@"tile-text-color" inStates:[CPThemeStateDisabled, CPThemeStateHighlighted]] forThemeAttribute:@"text-color" inStates:[CPThemeStateDisabled, CPThemeStateHighlighted]];
+            [_textField setValue:[_datePicker valueForThemeAttribute:@"tile-text-shadow-color" inStates:[CPThemeStateDisabled, CPThemeStateHighlighted]] forThemeAttribute:@"text-shadow-color" inStates:[CPThemeStateDisabled, CPThemeStateHighlighted]];
+            [_textField setValue:[_datePicker valueForThemeAttribute:@"tile-text-shadow-offset" inStates:[CPThemeStateDisabled, CPThemeStateHighlighted]] forThemeAttribute:@"text-shadow-offset" inStates:[CPThemeStateDisabled, CPThemeStateHighlighted]];
+        }
+
+        [self addSubview:_textField];
+
+        [self setNeedsLayout];
+    }
+
+    return self;
+}
+
+
+// MARK: -
+// MARK: Theme methods
+
+/*! Set a theme
+*/
+- (BOOL)setThemeState:(ThemeState)aState
+{
+    [_textField setThemeState:aState];
+    [super setThemeState:aState];
+}
+
+/*! Unset a theme
+*/
+- (BOOL)unsetThemeState:(ThemeState)aState
+{
+    [_textField unsetThemeState:aState];
+    [super unsetThemeState:aState];
+}
+
+
+// MARK: -
+// MARK: Getter methods
+
+/*! Select the tile
+*/
+- (void)setSelected:(BOOL)shouldBeSelected
+{
+    if (_isSelected === shouldBeSelected)
+        return;
+
+    _isSelected = shouldBeSelected;
+
+    if (_isSelected)
+        [self setThemeState:CPThemeStateSelected];
+    else
+        [self unsetThemeState:CPThemeStateSelected];
+}
+
+/*! Disabled the tile (used for previous and next month tile)
+*/
+- (void)setDisabled:(BOOL)shouldBeDisabled
+{
+    if (_isDisabled === shouldBeDisabled)
+        return;
+
+    _isDisabled = shouldBeDisabled;
+
+    if (_isDisabled)
+        [self setThemeState:CPThemeStateDisabled];
+    else
+        [self unsetThemeState:CPThemeStateDisabled];
+}
+
+- (BOOL)isDisabled
+{
+    return _isDisabled;
+}
+
+/*! Highlight the tile (used for current day)
+*/
+- (void)setHighlighted:(BOOL)shouldBeHighlighted
+{
+    if (_isHighlighted === shouldBeHighlighted)
+        return;
+
+    _isHighlighted = shouldBeHighlighted;
+
+    if (_isHighlighted)
+        [self setThemeState:CPThemeStateHighlighted];
+    else
+        [self unsetThemeState:CPThemeStateHighlighted];
+}
+
+/*! Set the stringValue of the tile
+    @param aStringValue
+*/
+- (void)setStringValue:(CPString)aStringValue
+{
+    [_textField setStringValue:aStringValue];
+}
+
+
+// MARK: -
+// MARK: Layout methods
+
+/*! Layout the subviews
+*/
+- (void)layoutSubviews
+{
+    if ([_datePicker isCSSBased])
+    {
+        var attributeName = @"bezel-color-calendar";
+
+        if (_isSelected)
+        {
+            if (_firstSelected && !_lastSelected)
+                attributeName = @"bezel-color-calendar-left";
+            else if (_lastSelected && !_firstSelected)
+                attributeName = @"bezel-color-calendar-right";
+            else if (!_firstSelected && !_lastSelected)
+            {
+                if (_dayInWeek == 0)
+                    attributeName = @"bezel-color-calendar-left";
+                else if (_dayInWeek == 6)
+                    attributeName = @"bezel-color-calendar-right";
+                else
+                    attributeName = @"bezel-color-calendar-middle";
+            }
+        }
+
+        [self setBackgroundColor:[_datePicker valueForThemeAttribute:attributeName inState:[self themeState]]];
+        return;
+    }
+
+    var bounds = [self bounds];
+    [_textField sizeToFit];
+    [_textField setFrameOrigin:CGPointMake(bounds.size.width / 2 - [_textField frameSize].width / 2 + [_datePicker valueForThemeAttribute:@"border-width"], bounds.size.height / 2 - [_textField frameSize].height / 2)];
+}
+
+- (void)setFrame:(CGRect)aFrame
+{
+    [super setFrame:aFrame];
+    [_textField setFrame:CGRectMake(0, 0, aFrame.size.width, aFrame.size.height)];
+}
+
+/*! Drawrect
+*/
+- (void)drawRect:(CGRect)aRect
+{
+    [super drawRect:aRect];
+
+    if ([_datePicker isCSSBased])
+        return;
+
+    var themeState = [self themeState],
+        context = [[CPGraphicsContext currentContext] graphicsPort];
+
+    if (themeState.hasThemeState(CPThemeStateSelected))
+    {
+        [self setBackgroundColor:[_datePicker valueForThemeAttribute:@"bezel-color-calendar" inState:themeState]];
+        CGContextSetLineWidth(context, [_datePicker valueForThemeAttribute:@"border-width"]);
+        CGContextSetStrokeColor(context, [_datePicker valueForThemeAttribute:@"border-color" inState:themeState]);
+        CGContextAddRect(context, [self bounds]);
+        CGContextStrokeRect(context, [self bounds]);
+    }
+    else
+    {
+        // Clear color, because the original color of a tile is handle by his superview
+        [self setBackgroundColor:[CPColor clearColor]];
+    }
+
+}
+
+@end
+

AppKit/CPDatePicker/_CPDatePickerDayViewTextField.j

@@ -0,0 +1,48 @@
+/* _CPDatePickerDayViewTextField.j
+* AppKit
+*
+* Created by Alexandre Wilhelm
+* Copyright 2012 <alexandre.wilhelmfr@gmail.com>
+*
+* This library is free software; you can redistribute it and/or
+* modify it under the terms of the GNU Lesser General Public
+* License as published by the Free Software Foundation; either
+* version 2.1 of the License, or (at your option) any later version.
+*
+* This library is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+* Lesser General Public License for more details.
+*
+* You should have received a copy of the GNU Lesser General Public
+* License along with this library; if not, write to the Free Software
+* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
+*/
+
+@import <Foundation/Foundation.j>
+
+@import "CPTextField.j"
+
+@implementation _CPDatePickerDayViewTextField : CPTextField
+
++ (CPString)defaultThemeClass
+{
+    return @"datePickerDayViewTextField";
+}
+
++ (CPDictionary)themeAttributes
+{
+    return @{
+             @"min-size": CGSizeMakeZero(),
+             @"content-inset": CGInsetMakeZero(),
+             @"text-color": [CPColor blackColor],
+             @"text-shadow-color": [CPColor clearColor],
+             @"text-shadow-offset": CGSizeMakeZero(),
+             @"font": [CPNull null],
+             @"vertical-alignment": CPCenterVerticalTextAlignment,
+             @"alignment": CPCenterTextAlignment,
+             };
+}
+
+@end
+

AppKit/CPDatePicker/_CPDatePickerElementTextField.j

@@ -0,0 +1,604 @@
+/* _CPDatePickerElementTextField.j
+* AppKit
+*
+* Created by Alexandre Wilhelm
+* Copyright 2012 <alexandre.wilhelmfr@gmail.com>
+*
+* This library is free software; you can redistribute it and/or
+* modify it under the terms of the GNU Lesser General Public
+* License as published by the Free Software Foundation; either
+* version 2.1 of the License, or (at your option) any later version.
+*
+* This library is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+* Lesser General Public License for more details.
+*
+* You should have received a copy of the GNU Lesser General Public
+* License along with this library; if not, write to the Free Software
+* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
+*/
+
+@import "CPTextField.j"
+
+@class CPDatePicker
+@class _CPDatePickerElementView
+
+CPDatePickerElementTextFieldBecomeFirstResponder = @"CPDatePickerElementTextFieldBecomeFirstResponder";
+CPDatePickerElementTextFieldAMPMChangedNotification = @"CPDatePickerElementTextFieldAMPMChangedNotification";
+
+// Removed hardcoded KeyCodes (CPZeroKeyCode, etc) as they are unreliable across browsers/layouts.
+
+CPMonthDateType = 0;
+CPDayDateType = 1;
+CPYearDateType = 2;
+CPHourDateType = 3;
+CPSecondDateType = 4;
+CPMinuteDateType = 5;
+CPAMPMDateType = 6;
+
+/*! An element textField
+*/
+@implementation _CPDatePickerElementTextField : CPTextField
+{
+    _CPDatePickerElementTextField _nextTextField            @accessors(property=nextTextField);
+    _CPDatePickerElementTextField _previousTextField        @accessors(property=previousTextField);
+    _CPDatePickerElementView      _datePickerElementView    @accessors(property=datePickerElementView);
+
+    CPDatePicker    _datePicker @accessors(setter=setDatePicker:);
+
+    int _dateType  @accessors(getter=dateType);
+    int _maxNumber @accessors(getter=maxNumber);
+    int _minNumber @accessors(getter=minNumber);
+
+    BOOL    _firstEvent;
+    CPTimer _timerEdition;
+}
+
++ (CPString)defaultThemeClass
+{
+    return @"datePickerElementTextField";
+}
+
++ (CPDictionary)themeAttributes
+{
+    return @{
+             @"content-inset":  CGInsetMake(1.0, 0.0, 0.0, 0.0),
+             @"bezel-color":    [CPNull null],
+             @"min-size":       CGSizeMakeZero()
+             };
+}
+
+- (id)init
+{
+    if (self = [super init])
+    {
+        _firstEvent = YES;
+    }
+
+    return self;
+}
+
+/*! @ignore */
+- (BOOL)acceptsFirstResponder
+{
+    return [_datePicker isEnabled];
+}
+
+/*! Set the dateType of the textField
+*/
+- (void)setDateType:(int)aDateType
+{
+    _dateType = aDateType;
+
+    switch (aDateType)
+    {
+        case CPMonthDateType:
+            _minNumber = 1;
+            _maxNumber = 12;
+            break;
+
+        case CPDayDateType:
+            _minNumber = 1;
+            _maxNumber = 31;
+            break;
+
+        case CPYearDateType:
+            _minNumber = 0;
+            _maxNumber = 9999;
+            break;
+
+        case CPHourDateType:
+            _minNumber = 0;
+            _maxNumber = 23;
+            break;
+
+        case CPSecondDateType:
+            _minNumber = 0;
+            _maxNumber = 59;
+            break;
+
+        case CPMinuteDateType:
+            _minNumber = 0;
+            _maxNumber = 59;
+            break;
+    }
+}
+
+/*! Return the maxNumber of the textField
+*/
+- (int)maxNumber
+{
+    if (_dateType == CPDayDateType)
+        return [[_datePicker dateValue] _daysInMonth];
+
+    return _maxNumber;
+}
+
+/*! Return the maxNumber of the textField depending of the maxDate
+*/
+- (int)_maxNumberWithMaxDate
+{
+    var maxDate = [_datePicker maxDate],
+        date = [_datePicker dateValue];
+
+    if (maxDate)
+    {
+        switch (_dateType)
+        {
+            case CPMonthDateType:
+                if (maxDate.getFullYear() == date.getFullYear())
+                    return maxDate.getMonth();
+                break;
+
+            case CPDayDateType:
+                if (maxDate.getFullYear() == date.getFullYear() && maxDate.getMonth() == date.getMonth())
+                    return maxDate.getDate();
+                break;
+
+            case CPYearDateType:
+                return maxDate.getFullYear();
+
+            case CPHourDateType:
+                if (maxDate.getFullYear() == date.getFullYear() && maxDate.getMonth() == date.getMonth() && maxDate.getDate() == date.getDate())
+                    return maxDate.getHours();
+                break;
+
+            case CPSecondDateType:
+                if (maxDate.getFullYear() == date.getFullYear() && maxDate.getMonth() == date.getMonth() && maxDate.getDate() == date.getDate() && maxDate.getHours() == date.getHours() && maxDate.getMinutes() == date.getMinutes())
+                    return maxDate.getSeconds();
+                break;
+
+            case CPMinuteDateType:
+                if (maxDate.getFullYear() == date.getFullYear() && maxDate.getMonth() == date.getMonth() && maxDate.getDate() == date.getDate() && maxDate.getHours() == date.getHours())
+                    return maxDate.getMinutes();
+                break;
+        }
+    }
+
+    return _maxNumber;
+}
+
+/*! Set the stringValue of the textField. This is going to check if there is 2 or 4 letters. If not it adds a space. Check also the maxDate
+    It's called when the user is editing with the keyboard
+    @param aStringValue a CPString
+*/
+- (void)setValueForKeyEvent:(CPEvent)anEvent
+{
+    var keyCode = [anEvent keyCode],
+        characters = [anEvent characters];
+
+    // Check if the event is a deletion
+    var isDelete = (keyCode === CPDeleteKeyCode || keyCode === CPDeleteForwardKeyCode);
+
+    // Check if the event is a numeric input.
+    // By testing the character string against a regex, we support num-pads and
+    // international keyboards correctly, rather than relying on keyCode ranges.
+    var isNumeric = (characters && [characters length] > 0 && /^[0-9]$/.test(characters));
+
+    // If it is neither a delete command nor a digit, we ignore it.
+    if (!isDelete && !isNumeric)
+        return;
+
+    var newValue = [self stringValue].replace(/\s/g, ''),
+        length = [newValue length];
+
+    if (isDelete)
+    {
+        [_timerEdition invalidate];
+        _timerEdition = nil;
+        
+        // Ensure we don't substring if length is 0
+        if (length > 0)
+            newValue = [newValue substringToIndex:(length - 1)];
+    }
+    else
+    {
+        // Since isNumeric is true, characters is a valid digit string
+        var eventKeyValue = characters;
+
+        if (!_timerEdition)
+        {
+            _timerEdition = [CPTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(_timerKeyEvent:) userInfo:nil repeats:NO];
+
+            if (_firstEvent || !length)
+                newValue = eventKeyValue;
+            else
+                newValue = parseInt(newValue).toString() + eventKeyValue;
+        }
+        else
+        {
+            var newFireDate = [CPDate date];
+
+            newFireDate.setSeconds(newFireDate.getSeconds() + 2);
+            [_timerEdition setFireDate:newFireDate];
+
+            newValue = parseInt(newValue).toString() + eventKeyValue;
+        }
+    }
+
+    // Safety check for NaN before comparison
+    var numericValue = parseInt(newValue);
+    if (isNaN(numericValue))
+        numericValue = 0;
+
+    if (numericValue > [self _maxNumberWithMaxDate] || ([_datePicker _isAmericanFormat] && _dateType == CPHourDateType && numericValue > 12))
+        return;
+
+    _firstEvent = NO;
+
+    [super setObjectValue:newValue];
+}
+
+/*!
+    End of the timer
+*/
+- (void)_timerKeyEvent:(id)sender
+{
+    var stringValue = [self stringValue];
+
+    _timerEdition = nil;
+
+    if ([stringValue length])
+    {
+        if ([_datePicker _isAmericanFormat] && [self dateType] == CPHourDateType)
+        {
+            var isAMHour = [[self superview] _isAMHour];
+
+            if (!isAMHour && stringValue != 12)
+                stringValue = parseInt(stringValue) + 12;
+
+            if (stringValue == 12 && !isAMHour)
+                stringValue = 12;
+            else if (stringValue == 12)
+                stringValue = 0;
+        }
+
+        [self setObjectValue:stringValue];
+    }
+}
+
+/*!
+    We force to end the timer
+*/
+- (void)_invalidTimer
+{
+    if (_timerEdition)
+    {
+        [_timerEdition invalidate];
+        _timerEdition = nil;
+    }
+}
+
+/*!
+    We force to end the timer and to update the objectValue of the datePicker
+*/
+- (void)_endEditing
+{
+    if (_timerEdition)
+        [_timerEdition invalidate];
+
+    _timerEdition = nil;
+
+    var objectValue = [self stringValue];
+
+    if (![objectValue length])
+        objectValue = [self objectValue];
+
+    if ([_datePicker _isAmericanFormat] && [self dateType] == CPHourDateType)
+    {
+        var isAMHour = [[self superview] _isAMHour];
+
+        if (!isAMHour && objectValue != 12)
+            objectValue = parseInt(objectValue) + 12;
+
+        if (objectValue == 12 && !isAMHour)
+            objectValue = 12;
+        else if (objectValue == 12)
+            objectValue = 0;
+    }
+
+    [self setObjectValue:objectValue];
+}
+
+/*! Set the stringValue of the TextField. Add some zeros of there isn't 2/4 letters in the value. It's called at the end of the editing process
+    @param aStringValue a CPString
+*/
+- (void)setStringValue:(CPString)aStringValue
+{
+    if (_dateType == CPYearDateType)
+    {
+        while ([aStringValue length] < 4)
+            aStringValue = "0" + aStringValue;
+    }
+    else if (_dateType != CPAMPMDateType)
+    {
+        if (_dateType == CPHourDateType && [_datePicker _isAmericanFormat])
+        {
+            var value = parseInt(aStringValue);
+
+            if (value == 0)
+                value = 12;
+            else if (value > 12)
+                value = value - 12;
+
+            aStringValue = value.toString();
+        }
+
+        while ([aStringValue length] < 2)
+        {
+            if (_dateType == CPSecondDateType || _dateType == CPMinuteDateType)
+                aStringValue = @"0" + aStringValue;
+            else
+                aStringValue = @" " + aStringValue;
+        }
+
+    }
+
+    [super setObjectValue:aStringValue];
+}
+
+/*! Set the objectValue. This will update the dateValue of the datePicker also. It's called with the binding of the stepper or arrows
+    This is not going to update the objectValue of the control !!! It updates the dateValue of the datePicker who's going to update the datePickerTextField if necessary
+    It's a bit tricky
+    @param aObjectValue
+*/
+- (void)setObjectValue:(id)anObjectValue
+{
+    var dateValue = [[_datePicker dateValue] copy],
+        lengthString = [[self stringValue] length],
+        objectValue = parseInt(anObjectValue);
+
+    switch (_dateType)
+    {
+        case CPMonthDateType:
+
+            if (objectValue == 0 || !lengthString)
+            {
+                [self setStringValue:(dateValue.getMonth() + 1).toString()];
+                return;
+            }
+
+            var dateNextMonth = [dateValue copy];
+
+            dateNextMonth.setDate(1);
+            dateNextMonth.setMonth(parseInt(anObjectValue) - 1);
+
+            var numberDayNextMonth = [dateNextMonth _daysInMonth];
+
+            if (numberDayNextMonth < [dateValue _daysInMonth] && dateValue.getDate() > numberDayNextMonth)
+                [_datePickerElementView setDayDateValue:numberDayNextMonth.toString()];
+
+            [super setObjectValue:objectValue];
+            break;
+
+        case CPDayDateType:
+
+            if (objectValue == 0 || !lengthString)
+            {
+                [self setStringValue:dateValue.getDate().toString()];
+                return;
+            }
+
+            // if we enter a day that is too high for the current month
+            // we need to increase the month by one
+            // if we do not do this, the user input would be silently reset
+            // very poor user experience
+
+            if (parseInt(anObjectValue, 10) > [dateValue _daysInMonth])
+            {
+                [_datePickerElementView._textFieldMonth setIntValue:(dateValue.getMonth() + 2)];
+                [super setObjectValue:objectValue];
+                return;
+            }
+
+            [super setObjectValue:objectValue];
+            break;
+
+        case CPYearDateType:
+
+            if (objectValue == 0 || !lengthString)
+            {
+                [self setStringValue:dateValue.getFullYear().toString()];
+                return;
+            }
+
+            [super setObjectValue:objectValue];
+            break;
+
+        case CPHourDateType:
+
+            if (!lengthString)
+            {
+                [self setStringValue:dateValue.getHours().toString()];
+                return;
+            }
+
+            [super setObjectValue:objectValue];
+            break;
+
+        case CPSecondDateType:
+
+            if (!lengthString)
+            {
+                [self setStringValue:dateValue.getSeconds().toString()];
+                return;
+            }
+
+            [super setObjectValue:objectValue];
+            break;
+
+        case CPMinuteDateType:
+
+            if (!lengthString)
+            {
+                [self setStringValue:dateValue.getMinutes().toString()];
+                return;
+            }
+
+            [super setObjectValue:objectValue];
+            break;
+    }
+
+    var newDateValue = [_datePickerElementView dateValue],
+        timeZone = [_datePicker timeZone];
+
+    if (timeZone)
+    {
+        var secondsFromGMT = [timeZone secondsFromGMTForDate:newDateValue],
+            secondsFromGMTTimeZone = [timeZone secondsFromGMT];
+
+        newDateValue.setSeconds(newDateValue.getSeconds() + secondsFromGMT - secondsFromGMTTimeZone);
+    }
+
+#if PLATFORM(DOM)
+    _datePicker._invokedByUserEvent = YES;
+#endif
+    [_datePicker _setDateValue:newDateValue timeInterval:[_datePicker timeInterval]];
+#if PLATFORM(DOM)
+    _datePicker._invokedByUserEvent = NO;
+#endif
+}
+
+
+// MARK: -
+// MARK: Mouse event
+
+/*! Mouse down event. Launch a notification to notif the new first responder textField
+*/
+- (void)mouseDown:(CPEvent)anEvent
+{
+    if (![self isEnabled])
+        return;
+
+    [super mouseDown:anEvent];
+    [[CPNotificationCenter defaultCenter] postNotificationName:CPDatePickerElementTextFieldBecomeFirstResponder object:[[self superview] superview] userInfo:[CPDictionary dictionaryWithObject:self forKey:@"textField"]];
+}
+
+
+// MARK: -
+// MARK: Theme functions
+
+/*! Set the theme CPThemeStateSelected
+*/
+- (void)makeSelectable
+{
+    [self setThemeState:CPThemeStateSelected];
+    [_datePicker setThemeState:CPThemeStateEditing];
+}
+
+/*! Unsert the theme CPThemeStateSelected
+*/
+- (void)makeDeselectable
+{
+    _firstEvent = YES;
+    [self unsetThemeState:CPThemeStateSelected];
+    [_datePicker unsetThemeState:CPThemeStateEditing];
+}
+
+
+// MARK: -
+// MARK: Override
+
+/*!
+    We override this method to get all the time the good width
+*/
+- (CGSize)_minimumFrameSize
+{
+    var frameSize = [self frameSize],
+        contentInset = [self currentValueForThemeAttribute:@"content-inset"],
+        minSize = [self currentValueForThemeAttribute:@"min-size"],
+        maxSize = [self currentValueForThemeAttribute:@"max-size"],
+        lineBreakMode = [self lineBreakMode],
+        text = (_dateType == CPYearDateType) ? @"0000" : (_dateType == CPMonthDateType) ? @"10" : @"00",
+        textSize = CGSizeMakeCopy(frameSize),
+        font = [self currentValueForThemeAttribute:@"font"];
+
+    textSize.width -= contentInset.left + contentInset.right;
+    textSize.height -= contentInset.top + contentInset.bottom;
+
+    if (_dateType == CPAMPMDateType)
+        text = [self stringValue];
+
+    if (frameSize.width !== 0 &&
+        ![self isBezeled]     &&
+        (lineBreakMode === CPLineBreakByWordWrapping || lineBreakMode === CPLineBreakByCharWrapping))
+    {
+        textSize = [text sizeWithFont:font inWidth:textSize.width];
+    }
+    else
+    {
+        textSize = [text sizeWithFont:font];
+
+        // Account for possible fractional pixels at right edge
+        textSize.width += 1;
+    }
+
+    // Account for possible fractional pixels at bottom edge
+    textSize.height += 1;
+
+    frameSize.height = textSize.height + contentInset.top + contentInset.bottom;
+
+    if ([self isBezeled])
+    {
+        frameSize.height = MAX(frameSize.height, minSize.height);
+
+        if (maxSize.width > 0.0)
+            frameSize.width = MIN(frameSize.width, maxSize.width);
+
+        if (maxSize.height > 0.0)
+            frameSize.height = MIN(frameSize.height, maxSize.height);
+    }
+    else
+        frameSize.width = textSize.width + contentInset.left + contentInset.right;
+
+    frameSize.width = MAX(frameSize.width, minSize.width);
+
+    return frameSize;
+}
+
+- (CGRect)bezelRectForBounds:(CGRect)bounds
+{
+    return CGRectMakeCopy(bounds);
+}
+
+@end
+
+// MARK: -
+
+@implementation _CPDatePickerElementSeparator : CPTextField
+
++ (CPString)defaultThemeClass
+{
+    return @"datePickerElementSeparator";
+}
+
++ (CPDictionary)themeAttributes
+{
+    return @{
+             @"content-inset":  CGInsetMake(1.0, 0.0, 0.0, 0.0),
+             @"min-size":       CGSizeMakeZero()
+             };
+}
+
+@end

AppKit/CPDatePicker/_CPDatePickerHeaderView.j

@@ -0,0 +1,306 @@
+/* _CPDatePickerHeaderView.j
+* AppKit
+*
+* Created by Alexandre Wilhelm
+* Copyright 2012 <alexandre.wilhelmfr@gmail.com>
+*
+* This library is free software; you can redistribute it and/or
+* modify it under the terms of the GNU Lesser General Public
+* License as published by the Free Software Foundation; either
+* version 2.1 of the License, or (at your option) any later version.
+*
+* This library is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+* Lesser General Public License for more details.
+*
+* You should have received a copy of the GNU Lesser General Public
+* License along with this library; if not, write to the Free Software
+* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
+*/
+
+@import <Foundation/Foundation.j>
+
+@import "CPControl.j"
+@import "CPTextField.j"
+@import "CPButton.j"
+
+@class CPDatePicker
+
+var CPShortWeekDayNameArrayEn = [@"Mo", @"Tu", @"We", @"Th", @"Fr", @"Sa", @"Su"],
+    CPShortWeekDayNameArrayUS = [@"Su", @"Mo", @"Tu", @"We", @"Th", @"Fr", @"Sa"],
+    CPShortWeekDayNameArrayFr = [@"L", @"M", @"M", @"J", @"V", @"S", @"D"],
+    CPShortWeekDayNameArrayDe = [@"M", @"D", @"M", @"D", @"F", @"S", @"S"],
+    CPShortWeekDayNameArrayEs = [@"L", @"M", @"X", @"J", @"V", @"S", @"D"],
+    CPShortMonthNameArrayEn = [@"Jan", @"Feb", @"Mar", @"Apr", @"May", @"Jun", @"Jul", @"Aug", @"Sep", @"Oct", @"Nov", @"Dec"],
+    CPShortMonthNameArrayFr = [@"janv.", String.fromCharCode(102, 233, 118, 46), @"mars", @"apr.", @"mai", @"juin", @"juil.", String.fromCharCode(97, 111, 251, 116), @"sept.", @"oct.", @"nov.", String.fromCharCode(100, 233, 99, 46)],
+    CPShortMonthNameArrayDe = [@"Jan", @"Feb", String.fromCharCode(77, 228, 114), @"Apr", @"Mai", @"Jun", @"Jul", @"Aug", @"Sep", @"Okt", @"Nov", @"Dez"],
+    CPShortMonthNameArrayEs = [@"ene", @"feb", @"mar", @"abr", @"may", @"jun", @"jul", @"ago", @"sep", @"oct", @"nov", @"dic"];
+
+@implementation _CPDatePickerHeaderView : CPControl
+{
+    CPArray      _dayLabels;
+    CPArray      _monthNames;
+    CPButton     _nextButton;
+    CPButton     _previousButton;
+    CPButton     _currentButton;
+    CPDatePicker _datePicker;
+    CPDate       _date;
+    CPTextField  _title;
+}
+
+
+// MARK: Init methods
+
+/*! Init a new instance of _CPDatePickerHeaderView
+    @param aFrame
+    @param aDatePicker
+    @return a new instance of _CPDatePickerHeaderView
+*/
+- (id)initWithFrame:(CGRect)aFrame datePicker:(CPDatePicker)aDatePicker delegate:(id)aDelegate
+{
+    self = [super initWithFrame:aFrame];
+
+    if (self)
+    {
+        _datePicker = aDatePicker;
+
+        // Title
+        _title = [[CPTextField alloc] initWithFrame:CGRectMakeZero()];
+
+        [_title setValue:[_datePicker valueForThemeAttribute:@"title-font" inState:CPThemeStateNormal] forThemeAttribute:@"font" inState:CPThemeStateNormal];
+        [_title setValue:[_datePicker valueForThemeAttribute:@"title-text-color" inState:CPThemeStateNormal] forThemeAttribute:@"text-color" inState:CPThemeStateNormal];
+        [_title setValue:[_datePicker valueForThemeAttribute:@"title-text-shadow-color" inState:CPThemeStateNormal] forThemeAttribute:@"text-shadow-color" inState:CPThemeStateNormal];
+        [_title setValue:[_datePicker valueForThemeAttribute:@"title-text-shadow-offset" inState:CPThemeStateNormal] forThemeAttribute:@"text-shadow-offset" inState:CPThemeStateNormal];
+
+        [_title setValue:[_datePicker valueForThemeAttribute:@"title-font" inState:CPThemeStateDisabled] forThemeAttribute:@"font" inState:CPThemeStateDisabled];
+        [_title setValue:[_datePicker valueForThemeAttribute:@"title-text-color" inState:CPThemeStateDisabled] forThemeAttribute:@"text-color" inState:CPThemeStateDisabled];
+        [_title setValue:[_datePicker valueForThemeAttribute:@"title-text-shadow-color" inState:CPThemeStateDisabled] forThemeAttribute:@"text-shadow-color" inState:CPThemeStateDisabled];
+        [_title setValue:[_datePicker valueForThemeAttribute:@"title-text-shadow-offset" inState:CPThemeStateDisabled] forThemeAttribute:@"text-shadow-offset" inState:CPThemeStateDisabled];
+
+        [self addSubview:_title];
+
+        _dayLabels = [CPArray array];
+
+        // Days
+        for (var i = 0, count = [[self _dayNames] count]; i < count; i++)
+        {
+            var label = [[CPTextField alloc] initWithFrame:CGRectMakeZero()];
+            [label setValue:[_datePicker valueForThemeAttribute:@"tile-text-alignment"] forThemeAttribute:@"alignment"];
+
+            var contentInset = [_datePicker valueForThemeAttribute:@"tile-content-inset"];
+
+            if (contentInset)
+                [label setValue:contentInset forThemeAttribute:@"content-inset"];
+
+            [label setValue:[_datePicker valueForThemeAttribute:@"weekday-font" inState:CPThemeStateNormal] forThemeAttribute:@"font" inState:CPThemeStateNormal];
+            [label setValue:[_datePicker valueForThemeAttribute:@"weekday-text-color" inState:CPThemeStateNormal] forThemeAttribute:@"text-color" inState:CPThemeStateNormal];
+            [label setValue:[_datePicker valueForThemeAttribute:@"weekday-text-shadow-color" inState:CPThemeStateNormal] forThemeAttribute:@"text-shadow-color" inState:CPThemeStateNormal];
+            [label setValue:[_datePicker valueForThemeAttribute:@"weekday-text-shadow-offset" inState:CPThemeStateNormal] forThemeAttribute:@"text-shadow-offset" inState:CPThemeStateNormal];
+
+            [label setValue:[_datePicker valueForThemeAttribute:@"weekday-font" inState:CPThemeStateDisabled] forThemeAttribute:@"font" inState:CPThemeStateDisabled];
+            [label setValue:[_datePicker valueForThemeAttribute:@"weekday-text-color" inState:CPThemeStateDisabled] forThemeAttribute:@"text-color" inState:CPThemeStateDisabled];
+            [label setValue:[_datePicker valueForThemeAttribute:@"weekday-text-shadow-color" inState:CPThemeStateDisabled] forThemeAttribute:@"text-shadow-color" inState:CPThemeStateDisabled];
+            [label setValue:[_datePicker valueForThemeAttribute:@"weekday-text-shadow-offset" inState:CPThemeStateDisabled] forThemeAttribute:@"text-shadow-offset" inState:CPThemeStateDisabled];
+
+            [_dayLabels addObject:label];
+            [self addSubview:label];
+        }
+
+        // Arrows
+        var size = [_datePicker valueForThemeAttribute:@"previous-button-size"];
+
+        _previousButton = [[CPButton alloc] initWithFrame:CGRectMake(0, 0, size.width, size.height)];
+        [_previousButton setButtonType:CPMomentaryChangeButton];
+        [_previousButton setBordered:NO];
+        [_previousButton setImage:[_datePicker valueForThemeAttribute:@"arrow-image-left"]];
+        [_previousButton setAlternateImage:[_datePicker valueForThemeAttribute:@"arrow-image-left-highlighted"]];
+        [self addSubview:_previousButton];
+
+        size = [_datePicker valueForThemeAttribute:@"next-button-size"];
+
+        _nextButton = [[CPButton alloc] initWithFrame:CGRectMake(0, 0, size.width, size.height)];
+        [_nextButton setButtonType:CPMomentaryChangeButton];
+        [_nextButton setBordered:NO];
+        [_nextButton setImage:[_datePicker valueForThemeAttribute:@"arrow-image-right"]];
+        [_nextButton setAlternateImage:[_datePicker valueForThemeAttribute:@"arrow-image-right-highlighted"]];
+        [self addSubview:_nextButton];
+
+        size = [_datePicker valueForThemeAttribute:@"current-button-size"];
+
+        _currentButton = [[CPButton alloc] initWithFrame:CGRectMake(0, 0, size.width, size.height)];
+        [_currentButton setButtonType:CPMomentaryChangeButton];
+        [_currentButton setBordered:NO];
+        [_currentButton setImage:[_datePicker valueForThemeAttribute:@"circle-image"]];
+        [_currentButton setAlternateImage:[_datePicker valueForThemeAttribute:@"circle-image-highlighted"]];
+        [self addSubview:_currentButton];
+
+        [_previousButton setTarget:aDelegate];
+        [_previousButton setAction:@selector(_clickArrowPrevious:)];
+        [_previousButton setContinuous:YES];
+
+        [_nextButton setTarget:aDelegate];
+        [_nextButton setAction:@selector(_clickArrowNext:)];
+        [_nextButton setContinuous:YES];
+
+        [_currentButton setTarget:aDelegate];
+        [_currentButton setAction:@selector(_currentMonth:)];
+
+        [self setNeedsLayout];
+    }
+
+    return self;
+}
+
+
+// MARK: -
+// MARK: Getter Setter methods
+
+/*! Return the day names depending on the CPLocale of the datePicker
+    @return an array
+*/
+- (CPArray)_dayNames
+{
+    switch ([[_datePicker locale] objectForKey:CPLocaleLanguageCode])
+    {
+        case @"en":
+
+            // Check if it's in the american format. If yes the week will begin the sunday
+            if ([_datePicker _isAmericanFormat])
+                return CPShortWeekDayNameArrayUS;
+            else
+                return CPShortWeekDayNameArrayEn;
+            break;
+
+        case @"es":
+            return CPShortWeekDayNameArrayEs;
+            break;
+
+        case @"de":
+            return CPShortWeekDayNameArrayDe;
+            break;
+
+        case @"fr":
+            return CPShortWeekDayNameArrayFr;
+            break;
+
+        default:
+            return CPShortWeekDayNameArrayEn;
+            break;
+    }
+}
+
+/*! Return the month names depending on the CPLocale of the datePicker
+    @return an array
+*/
+- (CPArray)_monthNames
+{
+    switch ([[_datePicker locale] objectForKey:CPLocaleLanguageCode])
+    {
+        case @"en":
+            return CPShortMonthNameArrayEn;
+            break;
+
+        case @"es":
+            return CPShortMonthNameArrayEs;
+            break;
+
+        case @"de":
+            return CPShortMonthNameArrayDe;
+            break;
+
+        case @"fr":
+            return CPShortMonthNameArrayFr;
+            break;
+
+        default:
+            return CPShortMonthNameArrayEn;
+            break;
+    }
+
+}
+
+/*! Set the monthDate of the header
+    @aMonthDate the new monthDate
+*/
+- (void)setMonthForDate:(CPDate)aMonthDate
+{
+    _date = aMonthDate;
+    [self setNeedsLayout];
+}
+
+/*! Set enabled
+    @param aBoolean
+*/
+- (void)setEnabled:(BOOL)aBoolean
+{
+    [_previousButton setEnabled:aBoolean];
+    [_nextButton setEnabled:aBoolean];
+    [_currentButton setEnabled:aBoolean];
+    [_dayLabels makeObjectsPerformSelector:@selector(setEnabled:) withObject:aBoolean];
+    [_title setEnabled:aBoolean];
+}
+
+
+// MARK: -
+// MARK: Layout methods
+
+/*! Layout the subviews
+*/
+- (void)layoutSubviews
+{
+    var bounds = [self bounds],
+        dayNames = [self _dayNames],
+        width = CGRectGetWidth(bounds),
+        buttonInset = [_datePicker valueForThemeAttribute:@"arrow-inset"],
+        numberOfLabels = [_dayLabels count],
+        labelWidth = width / numberOfLabels,
+        sizeButtonLeft = [[_datePicker valueForThemeAttribute:@"arrow-image-left"] size],
+        sizeButtonRight = [[_datePicker valueForThemeAttribute:@"arrow-image-right"] size],
+        sizeButtonCircle = [[_datePicker valueForThemeAttribute:@"circle-image"] size],
+        sizeTileWidth = [_datePicker valueForThemeAttribute:@"size-tile"].width,
+        titleInset    = [_datePicker valueForThemeAttribute:@"title-inset"],
+        dayLabelInset = [_datePicker valueForThemeAttribute:@"day-label-inset"];
+
+    // Arrows
+    [_nextButton setFrame:CGRectMake(width - [_nextButton frameSize].width - buttonInset.right, buttonInset.top, sizeButtonRight.width, sizeButtonRight.height)];
+    [_currentButton setFrame:CGRectMake(CGRectGetMinX([_nextButton frame]) - sizeButtonCircle.width - buttonInset.left - buttonInset.right, buttonInset.top, sizeButtonCircle.width, sizeButtonCircle.height)];
+    [_previousButton setFrame:CGRectMake(CGRectGetMinX([_currentButton frame]) - sizeButtonLeft.width - buttonInset.left - buttonInset.right, buttonInset.top, sizeButtonLeft.width, sizeButtonLeft.height)];
+
+    var firstDayTileX;
+
+    // Weekday label
+    for (var i = 0; i < numberOfLabels; i++)
+    {
+        var dayLabel = _dayLabels[i];
+
+        [dayLabel setStringValue:dayNames[i]];
+
+        if (dayLabelInset) // Beginning with Aristo3
+        {
+            var thisWidth = ROUND((i+1) * sizeTileWidth) - ROUND(i * sizeTileWidth);
+
+            [dayLabel sizeToFit];
+            [dayLabel setFrame:CGRectMake(dayLabelInset.left + ROUND(i * sizeTileWidth), dayLabelInset.top, thisWidth, [dayLabel frameSize].height)];
+        }
+        else
+        {
+            [dayLabel sizeToFit];
+            [dayLabel setFrameOrigin:CGPointMake(sizeTileWidth * (i + 1) - sizeTileWidth / 2 - [dayLabel frameSize].width / 2, 23)];
+
+            if (i == 0)
+                firstDayTileX = sizeTileWidth * (i + 1) - sizeTileWidth / 2 - [dayLabel frameSize].width / 2;
+        }
+    }
+
+    // Title
+    [_title setStringValue:[CPString stringWithFormat:@"%s %i", [self _monthNames][_date.getMonth()], _date.getFullYear()]];
+    [_title sizeToFit];
+
+    if (titleInset) // Beginning with Aristo3
+        [_title setFrameOrigin:CGPointMake(titleInset.left, titleInset.top)];
+    else
+        [_title setFrameOrigin:CGPointMake(firstDayTileX, 6)];
+}
+
+@end

AppKit/CPDatePicker/_CPDatePickerMonthView.j

@@ -0,0 +1,636 @@
+/* _CPDatePickerMonthView.j
+* AppKit
+*
+* Created by Alexandre Wilhelm
+* Copyright 2012 <alexandre.wilhelmfr@gmail.com>
+*
+* This library is free software; you can redistribute it and/or
+* modify it under the terms of the GNU Lesser General Public
+* License as published by the Free Software Foundation; either
+* version 2.1 of the License, or (at your option) any later version.
+*
+* This library is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+* Lesser General Public License for more details.
+*
+* You should have received a copy of the GNU Lesser General Public
+* License along with this library; if not, write to the Free Software
+* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
+*/
+
+@import <Foundation/Foundation.j>
+
+@import "CPControl.j"
+@import "_CPDatePickerDayView.j"
+
+@class CPDatePicker
+
+@global CPSingleDateMode
+@global CPRangeDateMode
+
+@implementation _CPDatePickerMonthView : CPControl
+{
+    BOOL         _isMonthJustChanged;
+    CPArray      _dayTiles;
+    CPDate       _clickDate;
+    CPDate       _dragDate;
+    CPDate       _date;
+    CPDate       _previousMonth @accessors(property=previousMonth);
+    CPDate       _nextMonth @accessors(property=nextMonth);
+    CPDatePicker _datePicker;
+    CPEvent      _eventDragged;
+    CPTimer      _timerMonth;
+    id           _delegate;
+    int          _indexDayTile;
+}
+
+
+// MARK: Init methods
+
+/*! Init a _CPDatePickerMonthView
+    @param aFrame
+    @param aDatePicker
+    @return a new _CPDatePickerMonthView
+*/
+- (id)initWithFrame:(CGRect)aFrame datePicker:(CPDatePicker)aDatePicker delegate:(id)aDelegate
+{
+    if (self = [super initWithFrame:aFrame])
+    {
+        _delegate = aDelegate;
+        _isMonthJustChanged = NO;
+        _indexDayTile = -1;
+        _datePicker = aDatePicker;
+        _dayTiles = [CPArray array];
+
+        // Create tiles
+        for (var i = 0; i < 42; i++)
+        {
+            var dayView = [[_CPDatePickerDayView alloc] initWithFrame:CGRectMakeZero() withDatePicker:_datePicker];
+            [self addSubview:dayView];
+            [_dayTiles addObject:dayView];
+        }
+
+        [self setNeedsLayout];
+    }
+    return self;
+}
+
+
+// MARK: -
+// MARK: Getter Setter methods
+
+/*! Set the monthDate of the component
+    @param aDate
+*/
+- (void)setMonthForDate:(CPDate)aDate
+{
+    if (_dragDate)
+    {
+         if (_dragDate.getMonth() != _date.getMonth())
+             _isMonthJustChanged = YES;
+
+         _date = [_dragDate copy];
+    }
+    else
+    {
+        _date = [aDate copy];
+    }
+
+    if (![aDate isEqualToDate:[CPDate distantFuture]])
+    {
+        // Reset the date to the first day of the month & midnight
+        _date.setDate(1);
+        [_date _resetToMidnight];
+
+        // There must be a better way to do this.
+        var firstDay = [_date copy];
+        firstDay.setDate(1);
+
+        // Set the previous and next month date. This is usefull for the tile of the next/previous month
+        _previousMonth = new Date(firstDay.getTime() - 86400000);
+        _previousMonth.setDate(1);
+
+        _nextMonth = new Date(firstDay.getTime() + (([_date _daysInMonth] + 1) * 86400000));
+        _nextMonth.setDate(1);
+    }
+
+    [self reloadData];
+
+    if (_isMonthJustChanged)
+    {
+        var dayTile = [_dayTiles objectAtIndex:_indexDayTile];
+
+        if ([dayTile date].getMonth() == _date.getMonth())
+        {
+            [self mouseDragged:_eventDragged];
+        }
+        else
+        {
+            if ([dayTile date].getMonth() - _date.getMonth() == 1 || [dayTile date].getFullYear() - _date.getFullYear() == 1)
+                _timerMonth = [CPTimer scheduledTimerWithTimeInterval:1.5 target:self selector:@selector(_timerNextMonthEvent:) userInfo:nil repeats:NO];
+            else
+                _timerMonth = [CPTimer scheduledTimerWithTimeInterval:1.5 target:self selector:@selector(_timerPreviousMonthEvent:) userInfo:nil repeats:NO];
+        }
+    }
+}
+
+- (void)monthDate
+{
+    return _date;
+}
+
+/*! Return the size of a tile
+*/
+- (CGSize)tileSize
+{
+    return [_datePicker valueForThemeAttribute:@"size-tile"];
+}
+
+/*! Return the first index day of the month
+*/
+- (int)startOfWeekForDate:(CPDate)aDate
+{
+    var day = aDate.getDay();
+
+    // American people begins the week the sunday
+    if (![_datePicker _isAmericanFormat])
+        return (day + 6) % 7;
+
+    return day;
+}
+
+/*! Set enabled
+    @param aBoolean
+*/
+- (void)setEnabled:(BOOL)aBoolean
+{
+    [super setEnabled:aBoolean];
+    [self reloadData];
+}
+
+
+/*! Return the index of tile depending of the giving event
+    @param anEvent
+    @return an index
+*/
+- (CPInteger)indexOfTileForEvent:(CPEvent)anEvent
+{
+    var locationInView = [self convertPoint:[anEvent locationInWindow] fromView:nil],
+        tileSize       = [self tileSize],
+        borderWidth    = [_datePicker valueForThemeAttribute:@"border-width"],
+        margin         = [_datePicker valueForThemeAttribute:@"tile-margin"] || CGSizeMakeZero(),
+        tileInset      = [_datePicker valueForThemeAttribute:@"tile-inset"] || CGInsetMakeZero();
+
+    // Get the week row
+    var rowIndex    = FLOOR((locationInView.y - tileInset.top - margin.height) / (tileSize.height + 2 * margin.height + borderWidth)),
+        columnIndex = FLOOR((locationInView.x - tileInset.left) / (tileSize.width + 2 * margin.width + borderWidth));
+
+    columnIndex = MIN(MAX(columnIndex, 0), 6);
+    rowIndex = MIN(MAX(rowIndex, 0), 5);
+
+    var tileIndex = (rowIndex * 7) + columnIndex;
+
+    return tileIndex;
+}
+
+// MARK: -
+// MARK: Reload data
+
+/*! Reload the data
+*/
+- (void)reloadData
+{
+    if (!_date)
+        return;
+
+    var currentMonth = _date,
+        startOfMonthDay = [self startOfWeekForDate:currentMonth],
+        daysInPreviousMonth = [_previousMonth _daysInMonth],
+        firstDayToShowInPreviousMonth = daysInPreviousMonth - startOfMonthDay,
+        currentDate = new Date(_previousMonth.getFullYear(), _previousMonth.getMonth(), firstDayToShowInPreviousMonth),
+        now = [CPDate date],
+        dateValue = [_datePicker dateValue];
+
+    // Update the tiles
+    for (var i = 0; i < [_dayTiles count]; i++)
+    {
+        var dayTile = _dayTiles[i];
+
+        // Increment to next day
+        currentDate.setTime(currentDate.getTime() + 90000000);
+        [currentDate _resetToMidnight];
+
+        var isPresentMonth = (now.getMonth() == currentDate.getMonth()
+                      && now.getFullYear() == currentDate.getFullYear());
+
+        [dayTile setDate:[currentDate copy]];
+        [dayTile setStringValue:currentDate.getDate()];
+        [dayTile setDisabled:/*![self isEnabled] ||*/ currentDate.getMonth() !== currentMonth.getMonth() || currentDate < [_datePicker minDate] || currentDate > [_datePicker maxDate]];
+        [dayTile setHighlighted:isPresentMonth && currentDate.getDate() == now.getDate()];
+    }
+
+    // Select the dates
+    [self _selectDate:[_datePicker dateValue] timeInterval:[_datePicker timeInterval]];
+}
+
+
+// MARK: -
+// MARK: Select methods
+
+/*! Select one date or several date depending of the giving interval
+    @param aStartDate
+    @param anInterval;
+*/
+- (void)_selectDate:(CPDate)aStartDate timeInterval:(CPInteger)anInterval
+{
+    var endDate = [[CPDate alloc] initWithTimeInterval:anInterval sinceDate:aStartDate],
+        tilesCount = [_dayTiles count];
+
+    aStartDate = [aStartDate copy];
+
+    [aStartDate _resetToMidnight];
+    [endDate _resetToMidnight];
+
+    var firstSelected = NO;
+
+    for (var i = 0; i < tilesCount; i++)
+    {
+        var tile = _dayTiles[i],
+            tileDate = [[tile date] copy],
+            selected = NO;
+
+        [tileDate _resetToMidnight];
+
+        if (aStartDate)
+            selected = tileDate >= aStartDate && tileDate <= endDate;
+
+        // Select a tile
+        [tile setSelected:selected];
+
+        // If we are disabled, we have to disable selected tiles so they will appear disabled
+        [tile setDisabled:[tile isDisabled] || (selected && ![self isEnabled])];
+
+        if (selected)
+        {
+            if (!firstSelected)
+            {
+                firstSelected = YES;
+                [tile setFirstSelected:YES];
+            }
+            else
+                [tile setFirstSelected:NO];
+
+            [tile setLastSelected:NO];
+        }
+        else
+        {
+            if (firstSelected)
+            {
+                firstSelected = NO;
+
+                // As there was a first selected and we are now on an unselected tile,
+                // we are sure that i > 0
+                [_dayTiles[i-1] setLastSelected:YES];
+            }
+        }
+    }
+}
+
+// MARK: -
+// MARK: Layout methods
+
+/*! Tile the view
+*/
+- (void)tile
+{
+    var tileSize = [self tileSize],
+        width = tileSize.width,
+        height = tileSize.height,
+        tilesCount = [_dayTiles count],
+        borderWidth =  [_datePicker valueForThemeAttribute:@"border-width"],
+        margin = [_datePicker valueForThemeAttribute:@"tile-margin"],
+        tileInset = [_datePicker valueForThemeAttribute:@"tile-inset"],
+        thisWidth,
+        thisX,
+        dayInWeek,
+        weekInMonth,
+        tileFrame,
+        tileIndex;
+
+    // Set the frame of the tiles
+    for (tileIndex = 0; tileIndex < tilesCount; tileIndex++)
+    {
+        dayInWeek   = tileIndex % 7;
+        weekInMonth = (tileIndex - dayInWeek) / 7;
+        tileFrame;
+
+        if (margin) // Beginning with Aristo3
+        {
+            thisX     = ROUND(dayInWeek * (width + 2 * margin.width));
+            thisWidth = ROUND((dayInWeek+1) * (width + 2 * margin.width)) - thisX;
+
+            tileFrame = CGRectMake(tileInset.left + thisX, tileInset.top + margin.height + weekInMonth * (height + 2 * margin.height), thisWidth + borderWidth, height + borderWidth);
+        }
+        else
+            tileFrame = CGRectMake(dayInWeek * width, weekInMonth * height, width + borderWidth, height + borderWidth);
+
+        [_dayTiles[tileIndex] setFrame:tileFrame];
+        [_dayTiles[tileIndex] setDayInWeek:dayInWeek];
+    }
+
+    [self reloadData];
+}
+
+/*! Layout the subviews
+*/
+- (void)layoutSubviews
+{
+    [super layoutSubviews];
+
+    [self tile];
+    [_dayTiles makeObjectsPerformSelector:@selector(setNeedsLayout)];
+}
+
+/*! Draw the component. This draws the border of the tile.
+    The selected tile are drawed in the drawRect method of the tile. But the unselected tile here.
+    It avoids some problems with tiles over other tiles (otherwise the color of the tile border would be different).
+    Rememeber that the first pixel of a tile are over the last pixel of the last tile (because the border)
+*/
+- (void)drawRect:(CGRect)aRect
+{
+    [super drawRect:aRect];
+
+    if ([_datePicker isCSSBased])
+    {
+        // We just have to draw the separator (if any)
+        // No separator color means no separator
+        var separatorColor       = [_datePicker valueForThemeAttribute:@"separator-color"],
+            separatorHeight      = [_datePicker valueForThemeAttribute:@"separator-height"],
+            separatorMarginWidth = [_datePicker valueForThemeAttribute:@"separator-margin-width"];
+
+        if (separatorColor)
+        {
+            var context = [[CPGraphicsContext currentContext] graphicsPort],
+                bounds  = [self bounds];
+
+            CGContextBeginPath(context);
+            CGContextSetStrokeColor(context, separatorColor);
+            CGContextSetLineWidth(context, separatorHeight);
+            CGContextMoveToPoint(context, separatorMarginWidth, 0.5);
+            CGContextAddLineToPoint(context, bounds.size.width - separatorMarginWidth, 0.5);
+            CGContextStrokePath(context);
+            CGContextClosePath(context);
+        }
+
+        return;
+    }
+
+    var context = [[CPGraphicsContext currentContext] graphicsPort],
+        width = [self tileSize].width,
+        height = [self tileSize].height,
+        isBorderPair = ([_datePicker valueForThemeAttribute:@"border-width"] % 2) == 0;
+
+    CGContextBeginPath(context);
+    CGContextSetStrokeColor(context, [_datePicker valueForThemeAttribute:@"border-color" inState:[_datePicker themeState]]);
+    CGContextSetLineWidth(context,  [_datePicker valueForThemeAttribute:@"border-width"]);
+
+    if ([_datePicker isBordered])
+    {
+        for (var i = 0; i < 6; i++)
+        {
+            var y = i * height;
+
+            // Very usefull to avoid to have a line of two pixels instead one
+            if (!isBorderPair)
+                y += 0.5;
+
+            CGContextMoveToPoint(context, 0, y);
+            CGContextAddLineToPoint(context, [self bounds].size.width, y);
+        }
+
+        for (var i = 0; i < 7; i++)
+        {
+            var x = i * width;
+
+            // Very usefull to avoid to have a line of two pixels instead one
+            if (!isBorderPair)
+                x += 0.5;
+
+            CGContextMoveToPoint(context, x, 0);
+            CGContextAddLineToPoint(context, x, [self bounds].size.height);
+        }
+    }
+    else
+    {
+        var y = 0;
+
+        // Very usefull to avoid to have a line of two pixels instead one
+        if (!isBorderPair)
+            y += 0.5;
+
+        CGContextMoveToPoint(context, 0, y);
+        CGContextAddLineToPoint(context, [self bounds].size.width, y);
+    }
+
+    CGContextStrokePath(context);
+    CGContextClosePath(context);
+}
+
+
+// MARK: -
+// MARK: Mouse event
+
+/*! Mouse down event
+*/
+- (void)mouseDown:(CPEvent)anEvent
+{
+    if (![self isEnabled])
+        return;
+
+    var dayTile = [_dayTiles objectAtIndex:[self indexOfTileForEvent:anEvent]],
+        dateTile = [[dayTile date] copy],
+        dateValue = [_datePicker dateValue];
+
+    _clickDate = [dateTile copy];
+    _dragDate = nil;
+    _indexDayTile = -1;
+    _eventDragged = nil;
+
+#if PLATFORM(DOM)
+    _datePicker._invokedByUserEvent = YES;
+#endif
+
+    // Check if we have to change or not the month of the component
+    if ([dayTile date].getMonth() == _date.getMonth())
+    {
+        if ([_datePicker datePickerMode] == CPRangeDateMode && [anEvent modifierFlags] & CPShiftKeyMask)
+        {
+            var dateValueAtMidnight = [[_datePicker dateValue] copy];
+
+            [dateValueAtMidnight _resetToMidnight];
+
+            if (dateTile < dateValueAtMidnight)
+            {
+                var interval;
+
+                if (dateTile == dateValueAtMidnight)
+                    interval = [_datePicker timeInterval];
+                else
+                    interval = ([dateValueAtMidnight timeIntervalSinceDate:dateTile] + [_datePicker timeInterval]);
+
+                [_datePicker _setDateValue:[self _hoursMinutesSecondsFromDatePickerForDate:dateTile] timeInterval:interval];
+            }
+            else if ([[dayTile date] isEqualToDate:dateValueAtMidnight])
+            {
+                [_datePicker _setDateValue:[self _hoursMinutesSecondsFromDatePickerForDate:dateTile] timeInterval:0];
+            }
+            else
+            {
+                [_datePicker _setDateValue:[self _hoursMinutesSecondsFromDatePickerForDate:[dateValueAtMidnight copy]] timeInterval:([dateTile timeIntervalSinceDate:dateValueAtMidnight])];
+            }
+
+            // Be sure to display the good month
+            [_delegate setDateValue:dateTile];
+        }
+        else
+        {
+            var minDate = [[_datePicker minDate] copy],
+                maxDate = [[_datePicker maxDate] copy];
+
+            [minDate _resetToMidnight];
+            [maxDate _resetToLastSeconds];
+
+            if (dateTile >= minDate && dateTile <= maxDate)
+                [_datePicker _setDateValue:[self _hoursMinutesSecondsFromDatePickerForDate:dateTile] timeInterval:0];
+        }
+    }
+    else
+    {
+        // Check the year and the month. The year is usefull when changing from Jan to Dec.
+        if (_date.getMonth() - [dayTile date].getMonth() == 1 || _date.getFullYear() - [dayTile date].getFullYear() == 1)
+            [_delegate _displayPreviousMonth];
+        else
+            [_delegate _displayNextMonth];
+    }
+
+#if PLATFORM(DOM)
+    _datePicker._invokedByUserEvent = NO;
+#endif
+}
+
+/*! Mouse dragged event
+*/
+- (void)mouseDragged:(CPEvent)anEvent
+{
+    if (![self isEnabled]  || !CGRectContainsPoint([self bounds],[self convertPoint:[anEvent locationInWindow] fromView:nil]))
+        return;
+
+    var dayTile = [_dayTiles objectAtIndex:[self indexOfTileForEvent:anEvent]],
+        dateTile = [[dayTile date] copy],
+        dateValue = [_datePicker dateValue];
+
+    _dragDate = [dateTile copy];
+    _indexDayTile = [self indexOfTileForEvent:anEvent];
+    _eventDragged = anEvent;
+
+#if PLATFORM(DOM)
+    _datePicker._invokedByUserEvent = YES;
+#endif
+
+    if ([_datePicker datePickerMode] == CPSingleDateMode)
+    {
+        // Check if we have to change or not the month of the component
+        if ([dayTile date].getMonth() == _date.getMonth())
+        {
+            [_timerMonth invalidate];
+            _isMonthJustChanged = NO;
+
+            [_datePicker _setDateValue:[self _hoursMinutesSecondsFromDatePickerForDate:dateTile] timeInterval:0];
+        }
+        else if (!_isMonthJustChanged)
+        {
+            [_timerMonth invalidate];
+            _isMonthJustChanged = NO;
+
+            // Check the year and the month. The year is usefull when changing from Jan to Dec.
+            if (_date.getMonth() - [dayTile date].getMonth() == 1 || _date.getFullYear() - [dayTile date].getFullYear() == 1)
+                [_delegate _displayPreviousMonth];
+            else
+                [_delegate _displayNextMonth];
+        }
+    }
+    else
+    {
+        if (dateTile.getMonth() == _date.getMonth() || !_isMonthJustChanged)
+        {
+            [_timerMonth invalidate];
+            _isMonthJustChanged = NO;
+
+            var dateValueAtMidnight = [[_datePicker dateValue] copy];
+
+            [dateValueAtMidnight _resetToMidnight];
+
+            if (dateTile < _clickDate)
+                [_datePicker _setDateValue:[self _hoursMinutesSecondsFromDatePickerForDate:dateTile] timeInterval:[_clickDate timeIntervalSinceDate:dateTile]];
+            else if ([[dayTile date] isEqualToDate:_clickDate])
+                [_datePicker _setDateValue:[self _hoursMinutesSecondsFromDatePickerForDate:dateTile] timeInterval:0];
+            else
+                [_datePicker _setDateValue:[self _hoursMinutesSecondsFromDatePickerForDate:_clickDate] timeInterval:[dateTile timeIntervalSinceDate:dateValueAtMidnight]];
+        }
+    }
+
+#if PLATFORM(DOM)
+    _datePicker._invokedByUserEvent = NO;
+#endif
+}
+
+- (void)mouseUp:(CPEvent)anEvent
+{
+    [_timerMonth invalidate];
+    _dragDate = nil;
+    _clickDate = nil;
+    _isMonthJustChanged = NO;
+    _indexDayTile = -1;
+    _eventDragged = nil;
+}
+
+
+// MARK: -
+// MARK: Timer
+
+- (void)_timerNextMonthEvent:(CPEvent)anEvent
+{
+    if (_isMonthJustChanged)
+    {
+        _dragDate.setMonth(_date.getMonth() + 1);
+        [_delegate _displayNextMonth];
+    }
+}
+
+- (void)_timerPreviousMonthEvent:(CPEvent)anEvent
+{
+    if (_isMonthJustChanged)
+    {
+        _dragDate.setMonth(_date.getMonth() - 1);
+        [_delegate _displayPreviousMonth];
+    }
+}
+
+
+// MARK: -
+// MARK: Date methods
+
+- (CPDate)_hoursMinutesSecondsFromDatePickerForDate:(CPDate)aDate
+{
+    var dateValue = [_datePicker dateValue];
+
+    aDate.setHours(dateValue.getHours());
+    aDate.setMinutes(dateValue.getMinutes());
+    aDate.setSeconds(dateValue.getSeconds());
+
+    return aDate;
+}
+
+@end
+

AppKit/CPDictionaryController.j

@@ -69,7 +69,7 @@
     aNewObject._controller = self;
     aNewObject._key = aKey;
 
-    if (aValue !== nil)
+    if (aValue != nil)
         [aNewObject setValue:aValue];
 
     return aNewObject;
@@ -98,7 +98,7 @@
     var iter = [[CPSet setWithArray:allKeys] objectEnumerator],
         obj;
 
-    while ((obj = [iter nextObject]) !== nil)
+    while ((obj = [iter nextObject]) != nil)
         if (![_excludedKeys containsObject:obj])
             [array addObject:[self _newObjectWithKey:obj value:nil]];
 

AppKit/CPDocument.j

@@ -515,7 +515,9 @@ var CPDocumentUntitledCount = 0;
 
         alert("There was an error retrieving the document.");
 
-        objj_msgSend(session.delegate, session.didReadSelector, self, NO, session.contextInfo);
+        var theDelegate = session.delegate;
+
+        theDelegate.isa.objj_msgSend3(theDelegate, session.didReadSelector, self, NO, session.contextInfo);
     }
     else
     {
@@ -540,7 +542,9 @@ var CPDocumentUntitledCount = 0;
 
                 _writeRequest = nil;
 
-                objj_msgSend(session.delegate, session.didSaveSelector, self, NO, session.contextInfo);
+                var theDelegate = session.delegate;
+
+                theDelegate.isa.objj_msgSend3(theDelegate, session.didSaveSelector, self, NO, session.contextInfo);
                 [self _sendDocumentSavedNotification:NO];
             }
         }
@@ -553,14 +557,15 @@ var CPDocumentUntitledCount = 0;
 */
 - (void)connection:(CPURLConnection)aConnection didReceiveData:(CPString)aData
 {
-    var session = aConnection.session;
+    var session = aConnection.session,
+        theDelegate = session.delegate;
 
     // READ
     if (aConnection == _readConnection)
     {
         [self readFromData:[CPData dataWithRawString:aData] ofType:session.fileType error:nil];
 
-        objj_msgSend(session.delegate, session.didReadSelector, self, YES, session.contextInfo);
+        theDelegate.isa.objj_msgSend3(theDelegate, session.didReadSelector, self, YES, session.contextInfo);
     }
     else
     {
@@ -569,7 +574,7 @@ var CPDocumentUntitledCount = 0;
 
         _writeRequest = nil;
 
-        objj_msgSend(session.delegate, session.didSaveSelector, self, YES, session.contextInfo);
+        theDelegate.isa.objj_msgSend3(theDelegate, session.didSaveSelector, self, YES, session.contextInfo);
         [self _sendDocumentSavedNotification:YES];
     }
 }
@@ -580,10 +585,11 @@ var CPDocumentUntitledCount = 0;
 */
 - (void)connection:(CPURLConnection)aConnection didFailWithError:(CPError)anError
 {
-    var session = aConnection.session;
+    var session = aConnection.session,
+        theDelegate = session.delegate;
 
     if (_readConnection == aConnection)
-        objj_msgSend(session.delegate, session.didReadSelector, self, NO, session.contextInfo);
+        theDelegate.isa.objj_msgSend3(theDelegate, session.didReadSelector, self, NO, session.contextInfo);
 
     else
     {
@@ -597,7 +603,7 @@ var CPDocumentUntitledCount = 0;
 
         alert("There was an error saving the document.");
 
-        objj_msgSend(session.delegate, session.didSaveSelector, self, NO, session.contextInfo);
+        theDelegate.isa.objj_msgSend3(theDelegate, session.didSaveSelector, self, NO, session.contextInfo);
         [self _sendDocumentSavedNotification:NO];
     }
 }
@@ -858,21 +864,27 @@ var CPDocumentUntitledCount = 0;
         [self canCloseDocumentWithDelegate:self shouldCloseSelector:@selector(_document:shouldClose:context:) contextInfo:{delegate:delegate, selector:selector, context:info}];
 
     else if ([delegate respondsToSelector:selector])
-        objj_msgSend(delegate, selector, self, YES, info);
+        delegate.isa.objj_msgSend3(delegate, selector, self, YES, info);
 }
 
 - (void)_document:(CPDocument)aDocument shouldClose:(BOOL)shouldClose context:(Object)context
 {
-    if (aDocument === self && shouldClose)
+    var theDelegate = context.delegate;
+
+    // Only close the document explicitly if there is NO delegate to handle the action.
+    // If a delegate exists (e.g., the CPWindow), it is responsible for performing the close
+    // upon receiving the callback below. Calling [self close] here would cause a double-close.
+    if (aDocument === self && shouldClose && theDelegate == nil)
         [self close];
 
-    objj_msgSend(context.delegate, context.selector, aDocument, shouldClose, context.context);
+    if (theDelegate)
+        theDelegate.isa.objj_msgSend3(theDelegate, context.selector, aDocument, shouldClose, context.context);
 }
 
 - (void)canCloseDocumentWithDelegate:(id)aDelegate shouldCloseSelector:(SEL)aSelector contextInfo:(Object)context
 {
     if (![self isDocumentEdited])
-        return [aDelegate respondsToSelector:aSelector] && objj_msgSend(aDelegate, aSelector, self, YES, context);
+        return [aDelegate respondsToSelector:aSelector] && aDelegate.isa.objj_msgSend3(aDelegate, aSelector, self, YES, context);
 
     _canCloseAlert = [[CPAlert alloc] init];
 
@@ -901,8 +913,8 @@ var CPDocumentUntitledCount = 0;
 
     if (returnCode === 0)
         [self saveDocumentWithDelegate:delegate didSaveSelector:selector contextInfo:context];
-    else
-        objj_msgSend(delegate, selector, self, returnCode === 2, context);
+    else if (delegate != null)
+        delegate.isa.objj_msgSend3(delegate, selector, self, returnCode === 2, context);
 
     _canCloseAlert = nil;
 }

AppKit/CPDocumentController.j

@@ -106,7 +106,7 @@ var CPSharedDocumentController = nil;
     @param aType the type of the new document
     @param shouldDisplay whether to display the document on screen
 */
-- (void)openUntitledDocumentOfType:(CPString)aType display:(BOOL)shouldDisplay
+- (CPDocument)openUntitledDocumentOfType:(CPString)aType display:(BOOL)shouldDisplay
 {
     var theDocument = [self makeUntitledDocumentOfType:aType error:nil];
 
@@ -297,7 +297,7 @@ var CPSharedDocumentController = nil;
     var iter = [_documents objectEnumerator],
         obj;
 
-    while ((obj = [iter nextObject]) !== nil)
+    while ((obj = [iter nextObject]) != nil)
     {
         if ([obj isDocumentEdited])
             return YES;
@@ -402,8 +402,10 @@ var CPSharedDocumentController = nil;
         }
     }
 
-    if ([context.delegate respondsToSelector:context.selector])
-        objj_msgSend(context.delegate, context.selector, self, [[self documents] count] === 0, context.context);
+    var theDelegate = context.delegate;
+
+    if ([theDelegate respondsToSelector:context.selector])
+        theDelegate.isa.objj_msgSend3(theDelegate, context.selector, self, [[self documents] count] === 0, context.context);
 }
 
 @end

AppKit/CPDragServer.j

@@ -26,6 +26,7 @@
 @import "CPPasteboard.j"
 @import "CPView.j"
 @import "CPWindow_Constants.j"
+@import "CPViewAnimation.j"
 
 @class CPWindow  // This file is imported by CPWindow.j
 @class _CPDOMDataTransferPasteboard
@@ -132,6 +133,10 @@ var CPDraggingSource_draggedImage_movedTo_          = 1 << 0,
     unsigned        _dragOperation;
 
     CPTimer         _draggingUpdateTimer;
+
+    // Animation State
+    CGPoint         _pendingEndLocation;
+    CPDragOperation _pendingEndOperation;
 }
 
 /*
@@ -261,10 +266,19 @@ var CPDraggingSource_draggedImage_movedTo_          = 1 << 0,
         {
             var contentView = [scrollView contentView],
                 bounds = [contentView bounds],
-                insetBounds = CGRectInset(bounds, 30, 30),
                 eventLocation = [contentView convertPoint:_draggingLocation fromView:nil],
                 deltaX = 0,
-                deltaY = 0;
+                deltaY = 0,
+                insetSize = 30;
+            
+            if ([contentView respondsToSelector:@selector(documentView)] &&
+                [[contentView documentView] respondsToSelector:@selector(rowHeight)])
+            {
+                // Adjust inset bounds based on CPTableView row height
+                insetSize = MAX(insetSize, [[contentView documentView] rowHeight]);
+            }
+            
+            var insetBounds = CGRectInset(bounds, insetSize, insetSize);
 
             if (!CGRectContainsPoint(insetBounds, eventLocation))
             {
@@ -316,6 +330,46 @@ var CPDraggingSource_draggedImage_movedTo_          = 1 << 0,
     [_draggingUpdateTimer invalidate];
     _draggingUpdateTimer = nil;
 
+    // Check if we should slide back (drag failed + slideBack requested)
+    if (![CPPlatform supportsDragAndDrop] && _shouldSlideBack && anOperation === CPDragOperationNone)
+    {
+        // Store state to finalize drag after animation completes
+        _pendingEndLocation = aLocation;
+        _pendingEndOperation = anOperation;
+
+        var currentFrame = [_draggedWindow frame],
+            targetFrame = CGRectMake(_startDragLocation.x, _startDragLocation.y, currentFrame.size.width, currentFrame.size.height);
+
+        // We use CPViewAnimation. Even though _draggedWindow is a CPWindow, 
+        // CPViewAnimation supports targets that respond to setFrame: (like NSViewAnimation does for NSWindow).
+        var animation = [[CPViewAnimation alloc] initWithViewAnimations:[
+            [CPDictionary dictionaryWithObjects:[_draggedWindow, currentFrame, targetFrame] 
+                                        forKeys:[CPViewAnimationTargetKey, CPViewAnimationStartFrameKey, CPViewAnimationEndFrameKey]]
+        ]];
+
+        [animation setAnimationCurve:CPAnimationEaseOut];
+        [animation setDuration:0.25];
+        [animation setDelegate:self];
+        [animation startAnimation];
+
+        return;
+    }
+
+    [self _performFinalCleanupWithLocation:aLocation operation:anOperation];
+}
+
+- (void)animationDidEnd:(CPAnimation)anAnimation
+{
+    [self _performFinalCleanupWithLocation:_pendingEndLocation operation:_pendingEndOperation];
+}
+
+- (void)animationDidStop:(CPAnimation)anAnimation
+{
+    [self _performFinalCleanupWithLocation:_pendingEndLocation operation:_pendingEndOperation];
+}
+
+- (void)_performFinalCleanupWithLocation:(CGPoint)aLocation operation:(CPDragOperation)anOperation
+{
     [_draggedView removeFromSuperview];
 
     if (![CPPlatform supportsDragAndDrop])

AppKit/CPDragServer_Constants.j

@@ -20,6 +20,7 @@
  * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
  */
 
+@typedef CPDragOperation
 CPDragOperationNone     = 0;
 CPDragOperationCopy     = 1 << 1;
 CPDragOperationLink     = 1 << 1;

AppKit/CPEvent.j

@@ -28,11 +28,20 @@
 
 @import "CPCompatibility.j"
 @import "CGGeometry.j"
-@import "CPText.j"
+@import "CPTrackingArea.j"
 
 @class CPTextField
+@class CPWindow
+@class CPGraphicsContext
 
 @global CPApp
+@global CPNewlineCharacter
+@global CPCarriageReturnCharacter
+@global CPEnterCharacter
+
+@typedef DOMEvent
+@typedef CPEventType
+
 
 var _CPEventPeriodicEventPeriod         = 0,
     _CPEventPeriodicEventTimer          = nil,
@@ -57,10 +66,11 @@ var _CPEventPeriodicEventPeriod         = 0,
     CPWindow            _window;
     Number              _windowNumber;
     CPString            _characters;
-    CPString            _charactersIgnoringModifiers
+    CPString            _charactersIgnoringModifiers;
     BOOL                _isARepeat;
     unsigned            _keyCode;
     DOMEvent            _DOMEvent;
+    BOOL                _isActionKey;
     int                 _data1;
     int                 _data2;
     short               _subtype;
@@ -68,11 +78,16 @@ var _CPEventPeriodicEventPeriod         = 0,
     float               _deltaX;
     float               _deltaY;
     float               _deltaZ;
+    float               _scrollingDeltaX;
+    float               _scrollingDeltaY;
+    BOOL                _hasPreciseScrollingDeltas;
 
 #if PLATFORM(DOM)
     BOOL                _suppressCappuccinoCut;
     BOOL                _suppressCappuccinoPaste;
 #endif
+
+    CPTrackingArea      _trackingArea;
 }
 
 /*!
@@ -96,17 +111,28 @@ var _CPEventPeriodicEventPeriod         = 0,
     @param unmodCharacters the string of keys pressed without the presence of any modifiers other than Shift
     @param repeatKey \c YES if this is caused by the system repeat as opposed to the user pressing the key again
     @param code a number associated with the keyboard key of this event
+    @param isAnActionKey a BOOL indicating whether this key is an action key (e.g. a function key)
     @throws CPInternalInconsistencyException if \c anEventType is not a CPKeyDown,
     CPKeyUp or CPFlagsChanged
     @return the keyboard event
 */
 + (CPEvent)keyEventWithType:(CPEventType)anEventType location:(CGPoint)aPoint modifierFlags:(unsigned int)modifierFlags
     timestamp:(CPTimeInterval)aTimestamp windowNumber:(int)aWindowNumber context:(CPGraphicsContext)aGraphicsContext
-    characters:(CPString)characters charactersIgnoringModifiers:(CPString)unmodCharacters isARepeat:(BOOL)repeatKey keyCode:(unsigned short)code
+    characters:(CPString)characters charactersIgnoringModifiers:(CPString)unmodCharacters isARepeat:(BOOL)repeatKey keyCode:(unsigned short)code isActionKey:(BOOL)isAnActionKey
 {
     return [[self alloc] _initKeyEventWithType:anEventType location:aPoint modifierFlags:modifierFlags
         timestamp:aTimestamp windowNumber:aWindowNumber context:aGraphicsContext
-        characters:characters charactersIgnoringModifiers:unmodCharacters isARepeat:repeatKey keyCode:code];
+        characters:characters charactersIgnoringModifiers:unmodCharacters isARepeat:repeatKey keyCode:code isActionKey:isAnActionKey];
+}
+
+// for backwards compatibility only
++ (CPEvent)keyEventWithType:(CPEventType)anEventType location:(CGPoint)aPoint modifierFlags:(unsigned int)modifierFlags
+                  timestamp:(CPTimeInterval)aTimestamp windowNumber:(int)aWindowNumber context:(CPGraphicsContext)aGraphicsContext
+                 characters:(CPString)characters charactersIgnoringModifiers:(CPString)unmodCharacters isARepeat:(BOOL)repeatKey keyCode:(unsigned short)code
+{
+    return [[self alloc] _initKeyEventWithType:anEventType location:aPoint modifierFlags:modifierFlags
+                                     timestamp:aTimestamp windowNumber:aWindowNumber context:aGraphicsContext
+                                    characters:characters charactersIgnoringModifiers:unmodCharacters isARepeat:repeatKey keyCode:code isActionKey:NO];
 }
 
 /*!
@@ -132,6 +158,27 @@ var _CPEventPeriodicEventPeriod         = 0,
         timestamp:aTimestamp windowNumber:aWindowNumber context:aGraphicsContext eventNumber:anEventNumber clickCount:aClickCount pressure:aPressure];
 }
 
+/*!
+    Creates a new mouse tracking event.
+
+    @param anEventType the event type
+    @param aPoint the location of the cursor in the window specified by \c aWindowNumber
+    @param modifierFlags a bitwise combination of the modifiers specified in the CPEvent globals
+    @param aTimestamp the time the event occurred
+    @param aWindowNumber the number of the CPWindow where the event occurred
+    @param aGraphicsContext the graphics context where the event occurred
+    @param anEventNumber a number for this event
+    @param aTrackingArea the tracking area that triggered the event
+    @throws CPInternalInconsistencyException if an invalid event type is provided
+    @return the new mouse event
+ */
++ (id)enterExitEventWithType:(CPEventType)anEventType location:(CGPoint)aPoint modifierFlags:(unsigned)modifierFlags
+               timestamp:(CPTimeInterval)aTimestamp windowNumber:(int)aWindowNumber context:(CPGraphicsContext)aGraphicsContext
+             eventNumber:(int)anEventNumber trackingArea:(CPTrackingArea)aTrackingArea
+{
+    return [[self alloc] _initEnterExitEventWithType:anEventType location:aPoint modifierFlags:modifierFlags timestamp:aTimestamp windowNumber:aWindowNumber context:aGraphicsContext eventNumber:anEventNumber trackingArea:aTrackingArea];
+}
+
 /*!
     Creates a new custom event.
 
@@ -163,7 +210,9 @@ var _CPEventPeriodicEventPeriod         = 0,
 
         // Make sure these are 0 rather than nil.
         _deltaX = 0;
+        _scrollingDeltaX = 0;
         _deltaY = 0;
+        _scrollingDeltaY = 0;
         _deltaZ = 0;
     }
 
@@ -190,10 +239,32 @@ var _CPEventPeriodicEventPeriod         = 0,
     return self;
 }
 
+/* @ignore */
+- (id)_initEnterExitEventWithType:(CPEventType)anEventType location:(CGPoint)aPoint modifierFlags:(unsigned)modifierFlags
+                        timestamp:(CPTimeInterval)aTimestamp windowNumber:(int)aWindowNumber context:(CPGraphicsContext)aGraphicsContext
+                      eventNumber:(int)anEventNumber trackingArea:(CPTrackingArea)aTrackingArea
+{
+    if ((anEventType != CPMouseEntered) && (anEventType != CPMouseExited) && (anEventType != CPCursorUpdate))
+        [CPException raise:CPInternalInconsistencyException reason:"Invalid event type"];
+
+    if (self = [self _initWithType:anEventType])
+    {
+        _location = CGPointCreateCopy(aPoint);
+        _modifierFlags = modifierFlags;
+        _timestamp = aTimestamp;
+        _context = aGraphicsContext;
+        _eventNumber = anEventNumber;
+        _trackingArea = aTrackingArea;
+        _window = [CPApp windowWithWindowNumber:aWindowNumber];
+    }
+
+    return self;
+}
+
 /* @ignore */
 - (id)_initKeyEventWithType:(CPEventType)anEventType location:(CGPoint)aPoint modifierFlags:(unsigned int)modifierFlags
     timestamp:(CPTimeInterval)aTimestamp windowNumber:(int)aWindowNumber context:(CPGraphicsContext)aGraphicsContext
-    characters:(CPString)characters charactersIgnoringModifiers:(CPString)unmodCharacters isARepeat:(BOOL)isARepeat keyCode:(unsigned short)code
+    characters:(CPString)characters charactersIgnoringModifiers:(CPString)unmodCharacters isARepeat:(BOOL)isARepeat keyCode:(unsigned short)code isActionKey:(BOOL)isAnActionKey
 {
     if (self = [self _initWithType:anEventType])
     {
@@ -205,6 +276,7 @@ var _CPEventPeriodicEventPeriod         = 0,
         _charactersIgnoringModifiers = unmodCharacters;
         _isARepeat = isARepeat;
         _keyCode = code;
+        _isActionKey = isAnActionKey;
         _windowNumber = aWindowNumber;
     }
 
@@ -225,6 +297,7 @@ var _CPEventPeriodicEventPeriod         = 0,
         _subtype = aSubtype;
         _data1 = aData1;
         _data2 = aData2;
+        _windowNumber = aWindowNumber;
     }
 
     return self;
@@ -278,6 +351,14 @@ var _CPEventPeriodicEventPeriod         = 0,
     return _type;
 }
 
+/*!
+    Returns the subtype of the event.
+*/
+- (CPEventType)subtype
+{
+    return _subtype;
+}
+
 /*!
     Returns the event's associated window.
 */
@@ -417,6 +498,31 @@ var _CPEventPeriodicEventPeriod         = 0,
     return _deltaZ;
 }
 
+- (BOOL)hasPreciseScrollingDeltas
+{
+    return !!_hasPreciseScrollingDeltas;
+}
+
+/*!
+    Returns the change in points on the x-axis for a mouse movement, unless hasPreciseScrollingDeltas is NO,
+    in which case the change is measured in number of "lines" or "rows" and needs to be multiplied as appropriate
+    to get change in pixels.
+*/
+- (float)scrollingDeltaX
+{
+    return _scrollingDeltaX;
+}
+
+/*!
+    Returns the change in points on the y-axis for a mouse movement, unless hasPreciseScrollingDeltas is NO,
+    in which case the change is measured in number of "lines" or "columns" and needs to be multiplied as appropriate
+    to get change in pixels.
+*/
+- (float)scrollingDeltaY
+{
+    return _scrollingDeltaY;
+}
+
 - (BOOL)_triggersKeyEquivalent:(CPString)aKeyEquivalent withModifierMask:aKeyEquivalentModifierMask
 {
     if (!aKeyEquivalent)
@@ -478,6 +584,21 @@ var _CPEventPeriodicEventPeriod         = 0,
     return !firstResponderIsText;
 }
 
+- (BOOL)_isActionOrCommandEvent
+{
+    // This method is now platform-agnostic. It checks for abstract properties
+    // of the event, including the _isActionKey flag that was set at creation time.
+    return (
+            // Is it a command shortcut?
+            (_modifierFlags & (CPCommandKeyMask | CPControlKeyMask)) ||
+
+            // Is it a key that doesn't produce a character?
+            ([_characters length] === 0) ||
+
+            // Was it identified as an action key by the platform-specific layer?
+            _isActionKey
+            );
+}
 /*!
     Return YES if this event is a part of processing a browser controlled cut or paste event
     where the browser will go ahead and do the work of cutting or pasting within the input
@@ -515,7 +636,7 @@ var _CPEventPeriodicEventPeriod         = 0,
 */
 + (void)stopPeriodicEvents
 {
-    if (_CPEventPeriodicEventTimer === nil)
+    if (_CPEventPeriodicEventTimer == nil)
         return;
 
     window.clearTimeout(_CPEventPeriodicEventTimer);
@@ -546,6 +667,14 @@ var _CPEventPeriodicEventPeriod         = 0,
     }
 }
 
+- (CPTrackingArea)trackingArea
+{
+    if ((_type !== CPMouseEntered) && (_type !== CPMouseExited) && (_type !== CPCursorUpdate))
+        [CPException raise:CPInternalInconsistencyException format:@"You can't call trackingArea for events of type %#x", _type];
+
+    return _trackingArea;
+}
+
 @end
 
 function _CPEventFirePeriodEvent()

AppKit/CPFlashMovie.j

@@ -1,85 +0,0 @@
-/*
- * CPFlashMovie.j
- * AppKit
- *
- * Created by Francisco Tolmasky.
- * Copyright 2008, 280 North, Inc.
- *
- * This library is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 2.1 of the License, or (at your option) any later version.
- *
- * This library is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public
- * License along with this library; if not, write to the Free Software
- * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
- */
-
-@import <Foundation/CPObject.j>
-
-
-/*!
-    @ingroup appkit
-    @class CPFlashMovie
-
-    CPFlashMovie is used to represent a Flash movie in the Cappuccino framework.
-*/
-@implementation CPFlashMovie : CPObject
-{
-    CPString        _filename;
-}
-
-/*!
-    Creates a new Flash movie with the swf at \c aFileName.
-    @param aFilename the swf to load
-    @return the initialized CPFlashMovie
-*/
-+ (id)flashMovieWithFile:(CPString)aFilename
-{
-    return [[self alloc] initWithFile:aFilename];
-}
-
-/*!
-    Initializes the Flash movie.
-    @param aFilename the swf to load
-    @return the initialized CPFlashMovie
-*/
-- (id)initWithFile:(CPString)aFilename
-{
-    self = [super init];
-
-    if (self)
-        _filename = aFilename;
-
-    return self;
-}
-
-- (CPString)filename
-{
-    return _filename;
-}
-
-@end
-
-var CPFlashMovieFilenameKey = "CPFlashMovieFilenameKey";
-
-@implementation CPFlashMovie (CPCoding)
-
-- (id)initWithCoder:(CPCoder)aCoder
-{
-    _filename = [aCoder decodeObjectForKey:CPFlashMovieFilenameKey];
-
-    return self;
-}
-
-- (void)encodeWithCoder:(CPCoder)aCoder
-{
-    [aCoder encodeObject:_filename forKey:CPFlashMovieFilenameKey];
-}
-
-@end

AppKit/CPFlashView.j

@@ -1,212 +0,0 @@
-/*
- * CPFlashView.j
- * AppKit
- *
- * Created by Francisco Tolmasky.
- * Copyright 2008, 280 North, Inc.
- *
- * This library is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 2.1 of the License, or (at your option) any later version.
- *
- * This library is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public
- * License along with this library; if not, write to the Free Software
- * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
- */
-
-@import "CPFlashMovie.j"
-@import "CPView.j"
-
-
-var IEFlashCLSID = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000";
-
-/*!
-    @ingroup appkit
-*/
-@implementation CPFlashView : CPView
-{
-    CPFlashMovie    _flashMovie;
-
-    CPDictionary    _params;
-    CPDictionary    _paramElements;
-#if PLATFORM(DOM)
-    DOMElement      _DOMParamElement;
-    DOMElement      _DOMObjectElement;
-#endif
-}
-
-- (id)initWithFrame:(CGRect)aFrame
-{
-    self = [super initWithFrame:aFrame];
-
-    if (self)
-    {
-#if PLATFORM(DOM)
-        if (!CPBrowserIsEngine(CPInternetExplorerBrowserEngine))
-        {
-            _DOMObjectElement = document.createElement(@"object");
-            _DOMObjectElement.id = [self elementID];
-            _DOMObjectElement.width = @"100%";
-            _DOMObjectElement.height = @"100%";
-            _DOMObjectElement.style.top = @"0px";
-            _DOMObjectElement.style.left = @"0px";
-            _DOMObjectElement.type = @"application/x-shockwave-flash";
-            _DOMParamElement = document.createElement(@"param");
-            _DOMParamElement.name = @"movie";
-
-            _DOMObjectElement.appendChild(_DOMParamElement);
-
-            _DOMElement.appendChild(_DOMObjectElement);
-        }
-        else
-            [self _rebuildIEObjects];
-#endif
-    }
-
-    return self;
-}
-
-- (void)setFlashMovie:(CPFlashMovie)aFlashMovie
-{
-    if (_flashMovie == aFlashMovie)
-        return;
-
-    _flashMovie = aFlashMovie;
-#if PLATFORM(DOM)
-    if (!CPBrowserIsEngine(CPInternetExplorerBrowserEngine))
-    {
-        _DOMParamElement.value = [aFlashMovie filename];
-        _DOMObjectElement.data = [aFlashMovie filename];
-    }
-    else
-        [self _rebuildIEObjects];
-#endif
-}
-
-- (CPFlashMovie)flashMovie
-{
-    return _flashMovie;
-}
-
-- (void)setFlashVars:(CPDictionary)aDictionary
-{
-    var varString = @"",
-        enumerator = [aDictionary keyEnumerator],
-        key;
-
-    if (key = [enumerator nextObject])
-        varString = [varString stringByAppendingFormat:@"%@=%@", key, [aDictionary objectForKey:key]];
-
-    while (key = [enumerator nextObject])
-        varString = [varString stringByAppendingFormat:@"&%@=%@", key, [aDictionary objectForKey:key]];
-
-    if (!_params)
-        _params = @{};
-
-    [_params setObject:varString forKey:@"flashvars"];
-    [self setParameters:_params];
-}
-
-- (CPDictionary)flashVars
-{
-    return [_params objectForKey:@"flashvars"];
-}
-
-- (void)setParameters:(CPDictionary)aDictionary
-{
-#if PLATFORM(DOM)
-    if (_paramElements && !CPBrowserIsEngine(CPInternetExplorerBrowserEngine))
-    {
-        var elements = [_paramElements allValues],
-            count = [elements count];
-
-        for (var i = 0; i < count; i++)
-            _DOMObjectElement.removeChild([elements objectAtIndex:i]);
-    }
-#endif
-    if (!_params)
-        _params = aDictionary;
-    else
-        [_params addEntriesFromDictionary:aDictionary];
-#if PLATFORM(DOM)
-    if (!CPBrowserIsEngine(CPInternetExplorerBrowserEngine))
-    {
-        _paramElements = @{};
-
-        var enumerator = [_params keyEnumerator],
-            key;
-
-        while (_DOMObjectElement && (key = [enumerator nextObject]) !== nil)
-        {
-            var param = document.createElement(@"param");
-            param.name = key;
-            param.value = [_params objectForKey:key];
-
-            _DOMObjectElement.appendChild(param);
-
-            [_paramElements setObject:param forKey:key];
-        }
-    }
-    else
-        [self _rebuildIEObjects];
-#endif
-}
-
-- (CPDictionary)parameters
-{
-    return _params;
-}
-
-#if PLATFORM(DOM)
-- (void)_rebuildIEObjects
-{
-    _DOMElement.innerHTML = @"";
-    if (![_flashMovie filename])
-        return;
-
-    var paramString = [CPString stringWithFormat:@"<param name='movie' value='%@' />", [_flashMovie filename]],
-        paramEnumerator = [_params keyEnumerator],
-        key;
-
-    while ((key = [paramEnumerator nextObject]) !== nil)
-        paramString = [paramString stringByAppendingFormat:@"<param name='%@' value='%@' />", key, [_params objectForKey:key]];
-
-    _DOMObjectElement = document.createElement(@"object");
-    _DOMElement.appendChild(_DOMObjectElement);
-
-    _DOMObjectElement.outerHTML = [CPString stringWithFormat:@"<object id=%@ classid=%@ width=%@ height=%@>%@</object>", [self elementID], IEFlashCLSID, CGRectGetWidth([self bounds]), CGRectGetHeight([self bounds]), paramString];
-}
-#endif
-
-- (CPString)elementID
-{
-    return @"CPFV_" + [self UID];
-}
-
-- (void)mouseMoved:(CPEvent)sommit
-{
-    [[[self window] platformWindow] _propagateCurrentDOMEvent:YES];
-}
-
-- (void)mouseDragged:(CPEvent)anEvent
-{
-    [[[self window] platformWindow] _propagateCurrentDOMEvent:YES];
-}
-
-- (void)mouseDown:(CPEvent)anEvent
-{
-    [[[self window] platformWindow] _propagateCurrentDOMEvent:YES];
-}
-
-- (void)mouseUp:(CPEvent)anEvent
-{
-    [[[self window] platformWindow] _propagateCurrentDOMEvent:YES];
-}
-
-@end

AppKit/CPFont.j

@@ -24,6 +24,9 @@
 @import <Foundation/CPBundle.j>
 
 @import "CPView.j"
+@import "CPFontDescriptor.j"
+@import "_CPObject+Theme.j"
+@import "CPControl.j" 
 
 CPFontDefaultSystemFontFace = @"Arial, sans-serif";
 CPFontDefaultSystemFontSize = 12;
@@ -37,12 +40,15 @@ CPFontCurrentSystemSize = -1;
 // For internal use only by this class and subclasses
 _CPFontSystemFacePlaceholder = "_CPFontSystemFacePlaceholder";
 
-var _CPFontCache          = {},
-    _CPSystemFontCache    = {},
-    _CPFontSystemFontFace = CPFontDefaultSystemFontFace,
-    _CPFontSystemFontSize = 12,
-    _CPFontFallbackFaces  = CPFontDefaultSystemFontFace.split(", "),
-    _CPFontStripRegExp    = new RegExp("(^\\s*[\"']?|[\"']?\\s*$)", "g");
+var _CPFontCache                   = {},
+    _CPSystemFontCache             = {},
+    _CPFontSystemFontFace          = CPFontDefaultSystemFontFace,
+    _CPFontSystemFontSize          = CPFontDefaultSystemFontSize,
+    _CPFontSystemFontSizeSmall     = CPFontDefaultSystemFontSize - 1,
+    _CPFontSystemFontSizeMini      = CPFontDefaultSystemFontSize - 2,
+    _CPFontFallbackFaces           = CPFontDefaultSystemFontFace.split(", "),
+    _CPFontStripRegExp             = new RegExp("(^\\s*[\"']?|[\"']?\\s*$)", "g"),
+    _CPFontSystemFontFaceSpecified = NO;
 
 
 #define _CPRealFontSize(aSize)  (aSize <= 0 ? _CPFontSystemFontSize : aSize)
@@ -108,7 +114,7 @@ following:
 <string>Asap</string>
 @endcode
 */
-@implementation CPFont : CPObject
+@implementation CPFont : CPObject <CPTheme>
 {
     CPString    _name;
     float       _size;
@@ -122,6 +128,22 @@ following:
     CPString    _cssString;
 }
 
++ (CPString)defaultThemeClass
+{
+    return @"font";
+}
+
++ (CPDictionary)themeAttributes
+{
+    return @{
+             @"system-font-face": [CPNull null],
+             @"system-font-style": [CPNull null],
+             @"system-font-size-regular": [CPNull null],
+             @"system-font-size-small": [CPNull null],
+             @"system-font-size-mini": [CPNull null]
+             };
+}
+
 + (void)initialize
 {
     if (self !== [CPFont class])
@@ -133,7 +155,10 @@ following:
         systemFontFace = [[CPBundle bundleForClass:[CPView class]] objectForInfoDictionaryKey:@"CPSystemFontFace"];
 
     if (systemFontFace)
+    {
         _CPFontSystemFontFace = _CPFontNormalizedNames(systemFontFace);
+        _CPFontSystemFontFaceSpecified = YES;
+    }
 
     var systemFontSize = [[CPBundle mainBundle] objectForInfoDictionaryKey:@"CPSystemFontSize"];
 
@@ -141,7 +166,62 @@ following:
         systemFontSize = [[CPBundle bundleForClass:[CPView class]] objectForInfoDictionaryKey:@"CPSystemFontSize"];
 
     if (systemFontSize)
+    {
         _CPFontSystemFontSize = systemFontSize;
+        _CPFontSystemFontFaceSpecified = YES;
+    }
+}
+
++ (void)initializeSystemFontFromTheme:(CPTheme)aTheme
+{
+    // If something was specified via +initialize (from an Info.plist file), don't do anything
+    if (_CPFontSystemFontFaceSpecified)
+        return;
+
+    // Reset all system font caches
+    _CPSystemFontCache = {};
+
+    // Now, try to get information from the theme
+    var systemFontFace = [aTheme valueForAttributeWithName:@"system-font-face" forClass:[CPFont class]];
+
+    if (systemFontFace)
+    {
+        [self _invalidateSystemFontCache];
+        _CPFontSystemFontFace = _CPFontNormalizedNames(systemFontFace);
+    }
+
+    var systemFontSize = [aTheme valueForAttributeWithName:@"system-font-size-regular" forClass:[CPFont class]];
+
+    if (systemFontSize)
+    {
+        [self _invalidateSystemFontCache];
+        _CPFontSystemFontSize = systemFontSize;
+    }
+
+    systemFontSize = [aTheme valueForAttributeWithName:@"system-font-size-small" forClass:[CPFont class]];
+
+    if (systemFontSize)
+    {
+        [self _invalidateSystemFontCache];
+        _CPFontSystemFontSizeSmall = systemFontSize;
+    }
+
+    systemFontSize = [aTheme valueForAttributeWithName:@"system-font-size-mini" forClass:[CPFont class]];
+
+    if (systemFontSize)
+    {
+        [self _invalidateSystemFontCache];
+        _CPFontSystemFontSizeMini = systemFontSize;
+    }
+
+    // Is there something to add to the global syle definition ?
+    var systemFontStyle = [aTheme valueForAttributeWithName:@"system-font-style" forClass:[CPFont class]];
+
+    if (systemFontStyle)
+    {
+        // Yes, so install it in the DOM Style element
+        document.getElementsByTagName("STYLE")[0].innerHTML += "\n" + [aTheme setCSSResourcesPathInString:systemFontStyle];
+    }
 }
 
 /*!
@@ -162,7 +242,7 @@ following:
     if (normalizedFaces === _CPFontSystemFontFace)
         return;
 
-    [self _invalidateSystemFontCache]
+    [self _invalidateSystemFontCache];
     _CPFontSystemFontFace = aFace;
 }
 
@@ -174,20 +254,19 @@ following:
     return _CPFontSystemFontSize;
 }
 
-+ (float)systemFontSizeForControlSize:(CPControlSize)aSize
++ (CPFont)systemFontForControlSize:(CPControlSize)aSize
 {
-    // TODO These sizes should be themable or made less arbitrary in some other way.
     switch (aSize)
     {
         case CPSmallControlSize:
-            return _CPFontSystemFontSize - 1;
+            return [self systemFontOfSize:_CPFontSystemFontSizeSmall];
 
         case CPMiniControlSize:
-            return _CPFontSystemFontSize - 2;
+            return [self systemFontOfSize:_CPFontSystemFontSizeMini];
 
         case CPRegularControlSize:
         default:
-            return _CPFontSystemFontSize;
+            return [self systemFontOfSize:_CPFontSystemFontSize];
     }
 }
 
@@ -314,6 +393,10 @@ following:
         _isItalic = isItalic;
         _isSystem = isSystem;
 
+        _theme = [CPTheme defaultTheme];
+        _themeState = CPThemeStateNormal;
+        [self _loadThemeAttributes];
+
         if (isSystem)
         {
             _name = aName;
@@ -381,6 +464,22 @@ following:
     return _CPRealFontSize(_size);
 }
 
+/*!
+    Returns the font size. Cocoa/AppKit compatibility alias for -size.
+*/
+- (float)pointSize
+{
+    return [self size];
+}
+
+/*!
+    Returns the font name. Cocoa/AppKit compatibility alias for -familyName.
+*/
+- (CPString)fontName
+{
+    return [self familyName];
+}
+
 /*!
     Returns the font as a CSS string
 */
@@ -431,8 +530,61 @@ following:
     _lineHeight = [metrics objectForKey:@"lineHeight"];
 }
 
+- (CPControlSize)controlSizeCorrespondingToFontSize
+{
+    switch (_size)
+    {
+        case _CPFontSystemFontSizeSmall:
+            return CPSmallControlSize;
+
+        case _CPFontSystemFontSizeMini:
+            return CPMiniControlSize;
+
+        default:
+            // If we can't find a corresponding size, return regular control size
+            return CPRegularControlSize;
+    }
+}
+
 @end
 
+@implementation CPFont(DescriptorAdditions)
+
+- (id)_initWithFontDescriptor:(CPFontDescriptor)fontDescriptor
+{
+    var aName = [fontDescriptor objectForKey: CPFontNameAttribute] ,
+        aSize = [fontDescriptor pointSize],
+        isBold = [fontDescriptor symbolicTraits] & CPFontBoldTrait,
+        isItalic = [fontDescriptor symbolicTraits] & CPFontItalicTrait;
+
+    return [self _initWithName:aName size:aSize bold:isBold italic:isItalic system:NO];
+}
+
++ (CPFont)fontWithDescriptor:(CPFontDescriptor)fontDescriptor size:(float)aSize
+{
+    var aName = [fontDescriptor objectForKey: CPFontNameAttribute],
+        isBold = [fontDescriptor symbolicTraits] & CPFontBoldTrait,
+        isItalic = [fontDescriptor symbolicTraits] & CPFontItalicTrait;
+
+    return [self _fontWithName:aName size:aSize || [fontDescriptor pointSize] bold:isBold italic:isItalic];
+}
+
+- (CPFontDescriptor)fontDescriptor
+{
+    var traits = 0;
+
+    if ([self isBold])
+        traits |= CPFontBoldTrait;
+
+    if ([self isItalic])
+        traits |= CPFontItalicTrait;
+
+    return [[CPFontDescriptor fontDescriptorWithName:_name size:_size] fontDescriptorWithSymbolicTraits:traits];
+}
+
+@end
+
+
 var CPFontNameKey     = @"CPFontNameKey",
     CPFontSizeKey     = @"CPFontSizeKey",
     CPFontIsBoldKey   = @"CPFontIsBoldKey",
@@ -454,7 +606,11 @@ var CPFontNameKey     = @"CPFontNameKey",
         isItalic = [aCoder decodeBoolForKey:CPFontIsItalicKey],
         isSystem = [aCoder decodeBoolForKey:CPFontIsSystemKey];
 
-    return [self _initWithName:fontName size:size bold:isBold italic:isItalic system:isSystem];
+    self = [self _initWithName:fontName size:size bold:isBold italic:isItalic system:isSystem];
+
+    [self _decodeThemeObjectsWithCoder:aCoder];
+
+    return self;
 }
 
 /*!
@@ -468,6 +624,8 @@ var CPFontNameKey     = @"CPFontNameKey",
     [aCoder encodeBool:_isBold forKey:CPFontIsBoldKey];
     [aCoder encodeBool:_isItalic forKey:CPFontIsItalicKey];
     [aCoder encodeBool:_isSystem forKey:CPFontIsSystemKey];
+
+    [self _encodeThemeObjectsWithCoder:aCoder];
 }
 
 @end

AppKit/CPFontManager.j

@@ -22,9 +22,14 @@
 
 @import <Foundation/CPObject.j>
 
+@import "CPControl.j"
 @import "CPFont.j"
+@import "CPFontDescriptor.j"
 
 @global CPApp
+@class CPFontPanel
+
+@global document
 
 CPItalicFontMask                    = 1 << 0;
 CPBoldFontMask                      = 1 << 1;
@@ -41,7 +46,20 @@ CPUnitalicFontMask                  = 1 << 24;
 
 
 var CPSharedFontManager     = nil,
-    CPFontManagerFactory    = Nil;
+    CPFontManagerFactory    = nil,
+    CPFontPanelFactory      = nil;
+
+/*
+    modifyFont: sender's tag
+*/
+CPNoFontChangeAction    = 0;
+CPViaPanelFontAction    = 1;
+CPAddTraitFontAction    = 2;
+CPSizeUpFontAction      = 3;
+CPSizeDownFontAction    = 4;
+CPHeavierFontAction     = 5;
+CPLighterFontAction     = 6;
+CPRemoveTraitFontAction = 7;
 
 /*!
     @ingroup appkit
@@ -59,6 +77,8 @@ var CPSharedFontManager     = nil,
     BOOL            _multiple @accessors(getter=isMultiple, setter=setMultiple:);
 
     CPDictionary    _activeChange;
+
+    unsigned        _fontAction;
 }
 
 // Getting the Shared Font Manager
@@ -83,6 +103,15 @@ var CPSharedFontManager     = nil,
 {
     CPFontManagerFactory = aClass;
 }
+/*!
+    Sets the class that will be used to create the application's
+    Font panel.
+*/
++ (void)setFontPanelFactory:(Class)aClass
+{
+    CPFontPanelFactory = aClass;
+}
+
 
 - (id)init
 {
@@ -163,35 +192,6 @@ var CPSharedFontManager     = nil,
     return ([aFont isBold] ? CPBoldFontMask : 0) | ([aFont isItalic] ? CPItalicFontMask : 0);
 }
 
-- (CPFont)convertFont:(CPFont)aFont
-{
-    if (!_activeChange)
-        return aFont;
-
-    var addTraits = [_activeChange valueForKey:@"addTraits"];
-
-    if (addTraits)
-        aFont = [self convertFont:aFont toHaveTrait:addTraits];
-
-    return aFont;
-}
-
-- (CPFont)convertFont:(CPFont)aFont toHaveTrait:(CPFontTraitMask)addTraits
-{
-    if (!aFont)
-        return nil;
-
-    var shouldBeBold = ([aFont isBold] || (addTraits & CPBoldFontMask)) && !(addTraits & CPUnboldFontMask),
-        shouldBeItalic = ([aFont isItalic] || (addTraits & CPItalicFontMask)) && !(addTraits & CPUnitalicFontMask),
-        shouldBeSize = [aFont size];
-
-    // XXX On the current platform there will always be a bold/italic version of each font, but still leave
-    // || aFont in here for future platforms.
-    aFont = [CPFont _fontWithName:[aFont familyName] size:shouldBeSize bold:shouldBeBold italic:shouldBeItalic] || aFont;
-
-    return aFont;
-}
-
 - (CPFont)convertFont:(CPFont)aFont toFace:(CPString)aTypeface
 {
     if (!aFont)
@@ -208,8 +208,13 @@ var CPSharedFontManager     = nil,
 
 - (@action)addFontTrait:(id)sender
 {
-    var tag = [sender tag];
-    _activeChange = tag === nil ? @{} : @{ @"addTraits": tag };
+    var tag = sender;
+
+    if ([sender respondsToSelector:@selector(tag)])
+        tag = [sender tag];
+
+    _activeChange = tag == nil ? @{} : @{ @"addTraits": tag };
+    _fontAction = CPAddTraitFontAction;
 
     [self sendAction];
 }
@@ -219,6 +224,187 @@ var CPSharedFontManager     = nil,
     return [CPApp sendAction:_action to:_target from:self];
 }
 
+
+/*!
+    This method open the font panel, create it if necessary.
+    @param sender The object that sent the message.
+*/
+- (CPFontPanel)fontPanel:(BOOL)createIt
+{
+    var panel = nil,
+        panelExists = [CPFontPanelFactory sharedFontPanelExists];
+
+    if ((panelExists) || (!panelExists && createIt))
+        panel = [CPFontPanelFactory sharedFontPanel];
+
+    return panel;
+}
+
+/*!
+    Convert a font to have the specified Font traits. The font is unchanged expect for the specified Font traits.
+    Using CPUnboldFontMask or CPUnitalicFontMask will respectively remove Bold and Italic traits.
+    @param aFont The font to convert.
+    @param fontTrait The new font traits mask.
+    @result The converted font or \c aFont if the conversion failed.
+*/
+- (CPFont)convertFont:(CPFont)aFont toHaveTrait:(CPFontTraitMask)fontTrait
+{
+    var attributes = [[[aFont fontDescriptor] fontAttributes] copy],
+        symbolicTrait = [[aFont fontDescriptor] symbolicTraits];
+
+    if (fontTrait & CPBoldFontMask)
+        symbolicTrait |= CPFontBoldTrait;
+
+    if (fontTrait & CPItalicFontMask)
+        symbolicTrait |= CPFontItalicTrait;
+
+    if (fontTrait & CPUnboldFontMask) /* FIXME: this only change CPFontSymbolicTrait what about CPFontWeightTrait */
+        symbolicTrait &= ~CPFontBoldTrait;
+
+    if (fontTrait & CPUnitalicFontMask)
+        symbolicTrait &= ~CPFontItalicTrait;
+
+    if (fontTrait & CPExpandedFontMask)
+        symbolicTrait |= CPFontExpandedTrait;
+
+    if (fontTrait & CPSmallCapsFontMask)
+        symbolicTrait |= CPFontSmallCapsTrait;
+
+    if (![attributes containsKey:CPFontTraitsAttribute])
+        [attributes setObject:[CPDictionary dictionaryWithObject:[CPNumber numberWithUnsignedInt:symbolicTrait]
+                                                          forKey:CPFontSymbolicTrait]
+                       forKey:CPFontTraitsAttribute];
+    else
+        [[attributes objectForKey:CPFontTraitsAttribute] setObject:[CPNumber numberWithUnsignedInt:symbolicTrait]
+                                                            forKey:CPFontSymbolicTrait];
+
+    return [[aFont class] fontWithDescriptor:[CPFontDescriptor fontDescriptorWithFontAttributes:attributes] size:0.0];
+}
+
+/*!
+    Convert a font to not have the specified Font traits. The font is unchanged expect for the specified Font traits.
+    @param aFont The font to convert.
+    @param fontTrait The font traits mask to remove.
+    @result The converted font or \c aFont if the conversion failed.
+*/
+- (CPFont)convertFont:(CPFont)aFont toNotHaveTrait:(CPFontTraitMask)fontTrait
+{
+    var attributes = [[[aFont fontDescriptor] fontAttributes] copy],
+        symbolicTrait = [[aFont fontDescriptor] symbolicTraits];
+
+    if ((fontTrait & CPBoldFontMask) || (fontTrait & CPUnboldFontMask)) /* FIXME: see convertFont:toHaveTrait: about CPFontWeightTrait */
+        symbolicTrait &= ~CPFontBoldTrait;
+
+    if ((fontTrait & CPItalicFontMask) || (fontTrait & CPUnitalicFontMask))
+        symbolicTrait &= ~CPFontItalicTrait;
+
+    if (fontTrait & CPExpandedFontMask)
+        symbolicTrait &= ~CPFontExpandedTrait;
+
+    if (fontTrait & CPSmallCapsFontMask)
+        symbolicTrait &= ~CPFontSmallCapsTrait;
+
+    if (![attributes containsKey:CPFontTraitsAttribute])
+        [attributes setObject:[CPDictionary dictionaryWithObject:[CPNumber numberWithUnsignedInt:symbolicTrait]
+                                                          forKey:CPFontSymbolicTrait]
+                       forKey:CPFontTraitsAttribute];
+    else
+        [[attributes objectForKey:CPFontTraitsAttribute] setObject:[CPNumber numberWithUnsignedInt:symbolicTrait]
+                                                            forKey:CPFontSymbolicTrait];
+
+    return [[aFont class] fontWithDescriptor:[CPFontDescriptor fontDescriptorWithFontAttributes:attributes] size:0.0];
+}
+
+/*!
+    Convert a font to have specified size. The font is unchanged expect for the specified size.
+    @param aFont The font to convert.
+    @param aSize The new font size.
+    @result The converted font or \c aFont if the conversion failed.
+*/
+- (CPFont)convertFont:(CPFont)aFont toSize:(float)aSize
+{
+    var descriptor = [aFont fontDescriptor];
+
+    return [[aFont class] fontWithDescriptor: descriptor size:aSize]
+}
+
+- (void)orderFrontFontPanel:(id)sender
+{
+    [[self fontPanel:YES] orderFront:sender];
+}
+
+- (void)modifyFont:(id)sender
+{
+    _fontAction = [sender tag];
+    [self sendAction];
+
+    if (_selectedFont)
+        [self setSelectedFont:[self convertFont:_selectedFont] isMultiple:NO];
+}
+
+/*!
+    This method causes the receiver to send its action message.
+    @param sender The object that sent the message. (a Font panel)
+*/
+- (void)modifyFontViaPanel:(id)sender
+{
+    _fontAction = CPViaPanelFontAction;
+    if (_selectedFont)
+        [self setSelectedFont:[self convertFont:_selectedFont] isMultiple:NO];
+
+    [self sendAction];
+}
+
+/*!
+    Convert a font according to current font changes, provided by the object that initiated the font change.
+    @param aFont The font to convert.
+    @result The converted font or \c aFont if the conversion failed.
+*/
+- (CPFont)convertFont:(CPFont)aFont
+{
+    var newFont = nil;
+
+    switch (_fontAction)
+    {
+        case CPNoFontChangeAction:
+            newFont = aFont;
+            break;
+
+        case CPViaPanelFontAction:
+            newFont = [[self fontPanel:NO] panelConvertFont:aFont];
+            break;
+
+        case CPAddTraitFontAction:
+            newFont = aFont;
+
+            if (!_activeChange)
+                break;
+
+            var addTraits = [_activeChange valueForKey:@"addTraits"];
+
+            if (addTraits)
+                newFont = [self convertFont:aFont toHaveTrait:addTraits];
+            break;
+
+        case CPSizeUpFontAction:
+            newFont = [self convertFont:aFont toSize:[aFont size] + 1.0]; /* any limit ? */
+            break;
+
+        case CPSizeDownFontAction:
+            if ([aFont size] > 1)
+                newFont = [self convertFont:aFont toSize:[aFont size] - 1.0];
+            /* else CPBeep() :-p */
+            break;
+
+        default:
+            CPLog.trace(@"-[" + [self className] + " " + _cmd + "] unsupported font action: " + _fontAction + " aFont unchanged");
+            newFont = aFont;
+            break;
+    }
+
+    return newFont;
+}
+
 @end
 
 var _CPFontDetectSpan,

AppKit/CPGradient.j

@@ -70,11 +70,12 @@ CPGradientDrawsAfterEndingLocation      = kCGGradientDrawsAfterEndLocation;
 {
     if (self = [super init])
     {
-        var cgColors = [],
-            count = [someColors count],
-            colorSpace = [aColorSpace CGColorSpace] || CGColorSpaceCreateDeviceRGB;
-        for (var i = 0; i < count; i++)
-            cgColors.push(CGColorCreate(colorSpace, [someColors[i] components]));
+        var colorSpace = [aColorSpace CGColorSpace] || CGColorSpaceCreateDeviceRGB,
+            cgColors = [someColors arrayByApplyingBlock:function(color)
+            {
+                return CGColorCreate(colorSpace, [color components])
+            }];
+
         _gradient = CGGradientCreateWithColors(colorSpace, cgColors, someLocations);
     }
 

AppKit/CPGraphics.j

@@ -43,10 +43,10 @@ function CPDrawTiledRects(
     if (sides.length != grays.length)
         [CPException raise:CPInvalidArgumentException reason:@"sides (length: " + sides.length + ") and grays (length: " + grays.length + ") must have the same length."];
 
-    var colors = [];
-
-    for (var i = 0; i < grays.length; ++i)
-        colors.push([CPColor colorWithCalibratedWhite:grays[i] alpha:1.0]);
+    var colors = [grays arrayByApplyingBlock:function(gray)
+    {
+        return [CPColor colorWithCalibratedWhite:gray alpha:1.0];
+    }];
 
     return CPDrawColorTiledRects(boundsRect, clipRect, sides, colors);
 }

AppKit/CPGraphicsContext.j

@@ -92,7 +92,7 @@ var CPGraphicsContextCurrent = nil,
     @param aGraphicsPort the graphics port to initialize with
     @return the initialized context
 */
-- (id)initWithGraphicsPort:(CPContext)aGraphicsPort
+- (id)initWithGraphicsPort:(CGContext)aGraphicsPort
 {
     self = [super init];
 

AppKit/CPImage.j

@@ -26,9 +26,28 @@
 @import <Foundation/CPRunLoop.j>
 @import <Foundation/CPString.j>
 @import <Foundation/CPData.j>
+@import <Foundation/CPKeyedArchiver.j>
+@import <Foundation/CPKeyedUnarchiver.j>
 
 @import "CGGeometry.j"
 @import "CPCompatibility.j"
+@import "CPGraphicsContext.j"
+
+@class CPColor
+@global document
+
+@protocol CPImageDelegate <CPObject>
+
+@optional
+- (void)imageDidLoad:(CPImage)anImage;
+- (void)imageDidError:(CPImage)anImage;
+- (void)imageDidAbort:(CPImage)anImage;
+
+@end
+
+var CPImageDelegate_imageDidLoad_   = 1 << 1,
+    CPImageDelegate_imageDidError_  = 1 << 2,
+    CPImageDelegate_imageDidAbort_  = 1 << 3;
 
 CPImageLoadStatusInitialized    = 0;
 CPImageLoadStatusLoading        = 1;
@@ -71,9 +90,7 @@ function CPImageInBundle()
 
     if (typeof(arguments[1]) === "number")
     {
-        if (arguments[1] !== nil && arguments[1] !== undefined)
-            size = CGSizeMake(arguments[1], arguments[2]);
-
+        size = CGSizeMake(arguments[1], arguments[2]);
         bundle = arguments[3];
     }
     else if (typeof(arguments[1]) === "object")
@@ -119,14 +136,15 @@ function CPAppKitImage(aFilename, aSize)
 */
 @implementation CPImage : CPObject
 {
-    CGSize      _size;
-    CPString    _filename;
-    CPString    _name;
+    CGSize                  _size;
+    CPString                _filename;
+    CPString                _name;
 
-    id          _delegate;
-    unsigned    _loadStatus;
+    id <CPImageDelegate>    _delegate;
+    unsigned                _loadStatus;
+    unsigned                _implementedDelegateMethods;
 
-    Image       _image;
+    Image                   _image;
 }
 
 - (id)init
@@ -146,7 +164,7 @@ function CPAppKitImage(aFilename, aSize)
 - (id)initByReferencingFile:(CPString)aFilename size:(CGSize)aSize
 {
     // Quietly return nil like in Cocoa, rather than crashing later.
-    if (aFilename === undefined || aFilename === nil)
+    if (aFilename == nil)
         return nil;
 
     self = [super init];
@@ -231,7 +249,7 @@ function CPAppKitImage(aFilename, aSize)
         var canvas = document.createElement("canvas"),
             ctx = canvas.getContext("2d");
 
-        canvas.width = _image.width,
+        canvas.width = _image.width;
         canvas.height = _image.height;
 
         ctx.drawImage(_image, 0, 0);
@@ -260,7 +278,7 @@ function CPAppKitImage(aFilename, aSize)
 */
 - (CGSize)size
 {
-    return _size;
+    return CGSizeMakeCopy(_size);
 }
 
 + (id)imageNamed:(CPString)aName
@@ -319,9 +337,22 @@ function CPAppKitImage(aFilename, aSize)
     Sets the receiver's delegate.
     @param the delegate
 */
-- (void)setDelegate:(id)aDelegate
+- (void)setDelegate:(id <CPImageDelegate>)aDelegate
 {
+    if (_delegate === aDelegate)
+        return;
+
     _delegate = aDelegate;
+    _implementedDelegateMethods = 0;
+
+    if ([_delegate respondsToSelector:@selector(imageDidLoad:)])
+        _implementedDelegateMethods |= CPImageDelegate_imageDidLoad_;
+
+    if ([_delegate respondsToSelector:@selector(imageDidError:)])
+        _implementedDelegateMethods |= CPImageDelegate_imageDidError_;
+
+    if ([_delegate respondsToSelector:@selector(imageDidAbort:)])
+        _implementedDelegateMethods |= CPImageDelegate_imageDidAbort_;
 }
 
 /*!
@@ -418,6 +449,11 @@ function CPAppKitImage(aFilename, aSize)
     return NO;
 }
 
+- (BOOL)isMaterialIconImage
+{
+    return NO;
+}
+
 - (CPString)description
 {
     var filename = [self filename],
@@ -457,7 +493,7 @@ function CPAppKitImage(aFilename, aSize)
         postNotificationName:CPImageDidLoadNotification
         object:self];
 
-    if ([_delegate respondsToSelector:@selector(imageDidLoad:)])
+    if (_implementedDelegateMethods & CPImageDelegate_imageDidLoad_)
         [_delegate imageDidLoad:self];
 }
 
@@ -466,7 +502,7 @@ function CPAppKitImage(aFilename, aSize)
 {
     _loadStatus = CPImageLoadStatusReadError;
 
-    if ([_delegate respondsToSelector:@selector(imageDidError:)])
+    if (_implementedDelegateMethods & CPImageDelegate_imageDidError_)
         [_delegate imageDidError:self];
 }
 
@@ -475,12 +511,235 @@ function CPAppKitImage(aFilename, aSize)
 {
     _loadStatus = CPImageLoadStatusCancelled;
 
-    if ([_delegate respondsToSelector:@selector(imageDidAbort:)])
+    if (_implementedDelegateMethods & CPImageDelegate_imageDidAbort_)
         [_delegate imageDidAbort:self];
 }
 
 @end
 
+// MARK: -
+// MARK: CSS Theming
+
+// The code below adds support for CSS theming with 100% compatibility with current theming system.
+// The idea is to extend CPImage (and CPColor) with CSS components and adapt low level UI components to
+// support this new kind of CPColor/CPImage. See CPImageView, CPView and _CPImageAndTextView.
+//
+// To create a CPImage that uses CSS, simply use the new class method :
+// + (CPImage)imageWithCSSDictionary:(CPDictionary)aDictionary beforeDictionary:(CPDictionary)beforeDictionary afterDictionary:(CPDictionary)afterDictionary size:(CGSize)aSize
+// where beforeDictionary & afterDictionary are related to ::before & ::after pseudo-elements.
+// If you don't need them, just use the simplified class method :
+// + (CPImage)imageWithCSSDictionary:(CPDictionary)aDictionary size:(CGSize)aSize
+//
+// Examples :
+// regularImageNormal = [CPImage imageWithCSSDictionary:@{
+//                                                        @"border-color": A3ColorActiveBorder,
+//                                                        @"border-style": @"solid",
+//                                                        @"border-width": @"1px",
+//                                                        @"border-radius": @"50%",
+//                                                        @"box-sizing": @"border-box",
+//                                                        @"background-color": A3ColorBackgroundWhite,
+//                                                        @"transition-duration": @"0.35s",
+//                                                        @"transition-property": @"all",
+//                                                        @"transition-timing-function": @"ease"
+//                                                        }
+//                                                 size:CGSizeMake(16,16)];
+//
+// imageSearch = [CPImage imageWithCSSDictionary:@{
+//                                                 @"background-image": @"url(%%packed.png)",
+//                                                 @"background-position": @"-16px -32px",
+//                                                 @"background-repeat": @"no-repeat",
+//                                                 @"background-size": @"100px 400px"
+//                                                 }
+//                                          size:CGSizeMake(16,16)];
+//
+// Remark : Please note the special URL of the background image used in this example : url(%%packed.png)
+//          During theme loading, "%%" will be replaced by the path to the theme blend resources folder.
+//          Typically, a CSS theme will use some (rare) images all packed together in a single image resource (see packed.png in Aristo3 theme)
+//
+//          Also, please note that if you don't use one of the CSS components, you can either set it to nil (best solution) or to an empty dictionary, like :
+//          aCssImage = [CPImage imageWithCSSDictionary:@{} beforeDictionary:nil afterDictionary:@{ ... }];
+//
+// You can use -(BOOL)isCSSBased to determine how to cope with it in your code.
+// -(BOOL)hasCSSDictionary, -(BOOL)hasCSSBeforeDictionary and -(BOOL)hasCSSAfterDictionary are convience methods you can use.
+//
+// Remark : -(DOMElement)applyCSSImageForView is meant to be used by low level UI widgets (like CPImageView and _CPImageAndTextView) to implement CSS theme support.
+//
+// In some circumstances, you may have to clear a CSS image. You can do this easily by replacing your current image with the special dummy empty CSS image :
+// [CPImage dummyCSSImageOfSize:CGSizeMake(someWidth, someHeight)]
+
+@implementation CPImage (CSSTheming)
+{
+    CPDictionary            _cssDictionary              @accessors(property=cssDictionary);
+    CPDictionary            _cssBeforeDictionary        @accessors(property=cssBeforeDictionary);
+    CPDictionary            _cssAfterDictionary         @accessors(property=cssAfterDictionary);
+    CGSize                  _displaySize;
+}
+
++ (CPImage)imageWithCSSDictionary:(CPDictionary)aDictionary size:(CGSize)aSize
+{
+    return [[CPImage alloc] initWithCSSDictionary:aDictionary beforeDictionary:nil afterDictionary:nil size:aSize];
+}
+
++ (CPImage)imageWithCSSDictionary:(CPDictionary)aDictionary beforeDictionary:(CPDictionary)beforeDictionary afterDictionary:(CPDictionary)afterDictionary size:(CGSize)aSize
+{
+    return [[CPImage alloc] initWithCSSDictionary:aDictionary beforeDictionary:beforeDictionary afterDictionary:afterDictionary size:aSize];
+}
+
++ (CPImage)dummyCSSImageOfSize:(CGSize)aSize
+{
+    // This is used to clear a previous CSS image
+    return [[CPImage alloc] initWithCSSDictionary:@{} beforeDictionary:nil afterDictionary:nil size:aSize];
+}
+
++ (CPImage)imageWithMaterialIconNamed:(CPString)iconName size:(CGSize)size
+{
+    return [_CPMaterialIconImage imageWithIconNamed:iconName size:size];
+}
+
++ (CPImage)imageWithMaterialIconNamed:(CPString)iconName size:(CGSize)size color:(CPColor)color
+{
+    return [_CPMaterialIconImage imageWithIconNamed:iconName size:size color:color];
+}
+
+- (id)initWithCSSDictionary:(CPDictionary)aDictionary beforeDictionary:(CPDictionary)beforeDictionary afterDictionary:(CPDictionary)afterDictionary size:(CGSize)aSize
+{
+    self = [super init];
+
+    if (self)
+    {
+        _size = CGSizeMakeCopy(aSize);
+        _filename = @"CSS image";
+        _loadStatus = CPImageLoadStatusCompleted;
+        _cssDictionary = aDictionary;
+        _cssBeforeDictionary = beforeDictionary;
+        _cssAfterDictionary = afterDictionary;
+        _displaySize = CGSizeMakeCopy(aSize);
+    }
+
+    return self;
+}
+
+- (BOOL)isCSSBased
+{
+    return !!(_cssDictionary || _cssBeforeDictionary || _cssAfterDictionary);
+}
+
+- (BOOL)hasCSSDictionary
+{
+    return ([_cssDictionary count] > 0);
+}
+
+- (BOOL)hasCSSBeforeDictionary
+{
+    return ([_cssBeforeDictionary count] > 0);
+}
+
+- (BOOL)hasCSSAfterDictionary
+{
+    return ([_cssAfterDictionary count] > 0);
+}
+
+- (DOMElement)applyCSSImageForView:(CPView)aView onDOMElement:(DOMElement)aDOMElement styleNode:(DOMElement)aStyleNode previousState:(CPArrayRef)aPreviousStateRef
+{
+#if PLATFORM(DOM)
+    // First, restore previous CSS styling before applying the new one
+
+    var aPreviousState = @deref(aPreviousStateRef);
+
+    for (var i = 0, count = aPreviousState.length; i < count; i++)
+        aDOMElement.style[aPreviousState[i][0]] = aPreviousState[i][1];
+
+    aPreviousState = @[];
+
+    // Then apply new CSS styling
+
+    [_cssDictionary enumerateKeysAndObjectsUsingBlock:function(aKey, anObject, stop)
+     {
+         [aPreviousState addObject:@[aKey, aDOMElement.style[aKey]]];
+         aDOMElement.style[aKey] = anObject;
+     }];
+
+    if (_cssBeforeDictionary || _cssAfterDictionary)
+    {
+        // We need to create a unique class name
+
+        var styleClassName = @".CP" + [aView UID],
+        styleContent = @"";
+
+        if (_cssBeforeDictionary)
+        {
+            styleContent += styleClassName + @"::before { ";
+
+            [_cssBeforeDictionary enumerateKeysAndObjectsUsingBlock:function(aKey, anObject, stop)
+             {
+                 styleContent += aKey + ": " + anObject + "; ";
+             }];
+
+            styleContent += "} ";
+        }
+
+        if (_cssAfterDictionary)
+        {
+            styleContent += styleClassName + @"::after { ";
+
+            [_cssAfterDictionary enumerateKeysAndObjectsUsingBlock:function(aKey, anObject, stop)
+             {
+                 styleContent += aKey + ": " + anObject + "; ";
+             }];
+
+            styleContent += "} ";
+        }
+
+        var styleDescription = document.createTextNode(styleContent);
+
+        if (!aStyleNode)
+        {
+            aStyleNode = document.createElement("style");
+
+            aView._DOMElement.insertBefore(aStyleNode, aView._DOMElement.firstChild);
+
+            aStyleNode.appendChild(styleDescription);
+        }
+        else
+        {
+            aStyleNode.replaceChild(styleDescription, aStyleNode.firstChild);
+        }
+
+        aDOMElement.className = @"CP"+[aView UID];
+    }
+    else
+    {
+        // no before/after so remove aStyleNode if existing
+
+        if (aStyleNode)
+        {
+            aView._DOMElement.removeChild(aStyleNode);
+            aStyleNode = nil;
+        }
+    }
+
+
+    // Return actualised values
+
+    @deref(aPreviousStateRef) = aPreviousState;
+
+    return aStyleNode;
+#endif
+}
+
+- (BOOL)_shouldBeResized
+{
+    return NO;
+}
+
+@end
+
+var CPImageCSSDictionaryKey       = @"CPImageCSSDictionaryKey",
+    CPImageCSSBeforeDictionaryKey = @"CPImageCSSBeforeDictionaryKey",
+    CPImageCSSAfterDictionaryKey  = @"CPImageCSSAfterDictionaryKey";
+
+// MARK: -
+
 @implementation CPImage (CPCoding)
 
 /*!
@@ -490,7 +749,10 @@ function CPAppKitImage(aFilename, aSize)
 */
 - (id)initWithCoder:(CPCoder)aCoder
 {
-    return [self initWithContentsOfFile:[aCoder decodeObjectForKey:@"CPFilename"] size:[aCoder decodeSizeForKey:@"CPSize"]];
+    if ([aCoder containsValueForKey:CPImageCSSDictionaryKey])
+        return [self initWithCSSDictionary:[aCoder decodeObjectForKey:CPImageCSSDictionaryKey] beforeDictionary:[aCoder decodeObjectForKey:CPImageCSSBeforeDictionaryKey] afterDictionary:[aCoder decodeObjectForKey:CPImageCSSAfterDictionaryKey] size:[aCoder decodeSizeForKey:@"CPSize"]];
+    else
+        return [self initWithContentsOfFile:[aCoder decodeObjectForKey:@"CPFilename"] size:[aCoder decodeSizeForKey:@"CPSize"]];
 }
 
 /*!
@@ -501,10 +763,218 @@ function CPAppKitImage(aFilename, aSize)
 {
     [aCoder encodeObject:_filename forKey:@"CPFilename"];
     [aCoder encodeSize:_size forKey:@"CPSize"];
+
+    // CSS Styling
+    if ([self isCSSBased])
+    {
+        [aCoder encodeObject:_cssDictionary       forKey:CPImageCSSDictionaryKey];
+        [aCoder encodeObject:_cssBeforeDictionary forKey:CPImageCSSBeforeDictionaryKey];
+        [aCoder encodeObject:_cssAfterDictionary  forKey:CPImageCSSAfterDictionaryKey];
+    }
 }
 
 @end
 
+// MARK: -
+// MARK: Drawing
+
+@implementation CPImage (Drawing)
+
+- (void)drawAtPoint:(CGPoint)point fromRect:(CPRect)fromRect operation:(CGBlendMode)op fraction:(float)delta
+{
+    if (_loadStatus !== CPImageLoadStatusCompleted)
+        return;
+
+    var context = [CPGraphicsContext currentContext].graphicsPort;
+
+    if (!context)
+        return;
+
+    CGContextSaveGState(context);
+
+    CGContextSetBlendMode(context, op);
+    CGContextSetAlpha(context, delta);
+
+    context.drawImage(
+        _image,
+        fromRect.origin.x,
+        fromRect.origin.y,
+        fromRect.size.width,
+        fromRect.size.height,
+        point.x,
+        point.y,
+        fromRect.size.width,
+        fromRect.size.height
+    );
+
+    CGContextRestoreGState(context);
+}
+
+@end
+
+
+// MARK: -
+
+@implementation _CPMaterialIconImage : CPImage
+{
+    CPMutableDictionary     _cachedColorVersions;
+    CPColor                 _cachedInvertedColor;
+}
+
++ (_CPMaterialIconImage)imageWithIconNamed:(CPString)iconName size:(CGSize)size
+{
+    return [[_CPMaterialIconImage alloc] initWithIconName:iconName size:size];
+}
+
++ (_CPMaterialIconImage)imageWithIconNamed:(CPString)iconName size:(CGSize)size color:(CPColor)color
+{
+    return [[_CPMaterialIconImage alloc] initWithIconName:iconName size:size color:color];
+}
+
++ (_CPMaterialIconImage)imageWithIconNamed:(CPString)iconName size:(CGSize)size color:(CPColor)color additionalCSSDictionary:(CPDictionary)additionalCSSDictionary
+{
+    return [[_CPMaterialIconImage alloc] initWithIconName:iconName size:size color:color additionalCSSDictionary:additionalCSSDictionary];
+}
+
+- (CPDictionary)_baseMaterialIconCSSDictionaryForIconName:(CPString)iconName size:(CGSize)size
+{
+    return @{
+             @"width": size.width + @"px",
+             @"height": size.height + @"px",
+             @"top": @"0px",
+             @"left": @"0px",
+             @"content": @"'" + iconName + @"'",
+
+             @"position": @"absolute",
+             @"z-index": @"300",
+
+             @"font-family": @"'Material Icons'",
+             @"font-weight": @"normal",
+             @"font-style": @"normal",
+             @"font-size": MIN(size.width, size.height) + @"px",
+             @"display": @"inline-block",
+             @"line-height": @"1",
+             @"text-transform": @"none",
+             @"letter-spacing": @"normal",
+             @"word-wrap": @"normal",
+             @"white-space": @"nowrap",
+             @"direction": @"ltr",
+             @"-webkit-font-smoothing": @"antialiased",
+             @"text-rendering": @"optimizeLegibility",
+             @"-moz-osx-font-smoothing": @"grayscale",
+             @"font-feature-settings": @"'liga'"
+             };
+}
+
+- (_CPMaterialIconImage)initWithIconName:(CPString)iconName size:(CGSize)size
+{
+    return [super initWithCSSDictionary:@{}
+                       beforeDictionary:@{}
+                        afterDictionary:[self _baseMaterialIconCSSDictionaryForIconName:iconName size:size]
+                                   size:size];
+}
+
+- (_CPMaterialIconImage)initWithIconName:(CPString)iconName size:(CGSize)size color:(CPColor)color
+{
+    var materialIconCSSDictionary = [self _baseMaterialIconCSSDictionaryForIconName:iconName size:size];
+
+    [materialIconCSSDictionary setObject:[color cssString] forKey:@"color"];
+
+    return [super initWithCSSDictionary:@{}
+                       beforeDictionary:@{}
+                        afterDictionary:materialIconCSSDictionary
+                                   size:size];
+}
+
+- (void)addRotationEffectWithAngle:(float)angle
+{
+    [self addCSSDictionary:@{
+                             @"transform":  @"rotate("+angle+"deg)",
+                             @"transition": @"transform 0.35s ease"
+                             }];
+}
+
+- (void)addCSSDictionary:(CPDictionary)additionalCSSDictionary
+{
+    [_cssAfterDictionary addEntriesFromDictionary:additionalCSSDictionary];
+}
+
+- (void)setSize:(CGSize)aSize
+{
+    [self _setDisplaySize:aSize];
+    [super setSize:aSize];
+}
+
+- (void)_setDisplaySize:(CGSize)aSize
+{
+    if (CGSizeEqualToSize(_displaySize, aSize))
+        return;
+
+    _displaySize = CGSizeMakeCopy(aSize);
+
+    [_cssAfterDictionary setObject:(aSize.width + @"px") forKey:@"width"];
+    [_cssAfterDictionary setObject:(aSize.height + @"px") forKey:@"height"];
+    [_cssAfterDictionary setObject:(MIN(aSize.width, aSize.height) + @"px") forKey:@"font-size"];
+}
+
+- (BOOL)_shouldBeResized
+{
+    return YES;
+}
+
+- (BOOL)isMaterialIconImage
+{
+    return YES;
+}
+
+- (_CPMaterialIconImage)invertedImage
+{
+    if (!_cachedInvertedColor)
+    {
+        var sourceCSSColor = [_cssAfterDictionary objectForKey:@"color"] || @"rgba(0,0,0,1)",
+            sourceColor    = [CPColor colorWithCSSString:sourceCSSColor];
+
+        _cachedInvertedColor = [CPColor colorWithRed:(1-[sourceColor redComponent])
+                                               green:(1-[sourceColor greenComponent])
+                                                blue:(1-[sourceColor blueComponent])
+                                               alpha:[sourceColor alphaComponent]];
+    }
+
+    return [self imageVersionWithColor:_cachedInvertedColor];
+}
+
+- (_CPMaterialIconImage)imageVersionWithColor:(CPColor)aColor
+{
+    // We can't just set the color in the cssAfterDictionary as this would not be noticed as a new image,
+    // so -setImage won't do anything, so no visual refresh won't occur.
+    // The trick here is to keep in cache a clone of this image for each needed color.
+    var colorCSSString = [aColor cssString];
+
+    if (!_cachedColorVersions)
+        _cachedColorVersions = @{};
+
+    var cachedColorVersion = [_cachedColorVersions objectForKey:colorCSSString];
+
+    if (!cachedColorVersion)
+    {
+        cachedColorVersion = [self duplicate];
+        [cachedColorVersion _setCSSColor:colorCSSString];
+
+        [_cachedColorVersions setObject:cachedColorVersion forKey:colorCSSString];
+    }
+
+    return cachedColorVersion;
+}
+
+- (void)_setCSSColor:(CPString)aCSSColor
+{
+    [_cssAfterDictionary setObject:aCSSColor forKey:@"color"];
+}
+
+@end
+
+// MARK: -
+
 @implementation CPThreePartImage : CPObject
 {
     CPArray _imageSlices;
@@ -645,3 +1115,14 @@ var CPNinePartImageImageSlicesKey   = @"CPNinePartImageImageSlicesKey";
 }
 
 @end
+
+// MARK: -
+
+@implementation CPImage (Duplication)
+
+- (CPImage)duplicate
+{
+    return [CPKeyedUnarchiver unarchiveObjectWithData:[CPKeyedArchiver archivedDataWithRootObject:self]];
+}
+
+@end

AppKit/CPImageView.j

@@ -29,6 +29,9 @@
 @global CPImagesPboardType
 @global appkit_tag_dom_elements
 
+@global document
+
+@typedef CPImageAlignment
 CPImageAlignCenter      = 0;
 CPImageAlignTop         = 1;
 CPImageAlignTopLeft     = 2;
@@ -97,10 +100,32 @@ var CPImageViewEmptyPlaceholderImage = nil;
 - (void)_createDOMImageElement
 {
 #if PLATFORM(DOM)
-    if (_DOMImageElement)
-        return;
+    var image = [self objectValue],
+        isCSSBasedImage = [image isCSSBased],
+        isIMGImageElement = _DOMImageElement && (_DOMImageElement.nodeName == "IMG");
 
-    _DOMImageElement = document.createElement("img");
+    // First, check if we need to destroy a current DOM image element. This is the case if :
+    // - we have one but not the right one (that is a DIV but needing an IMG, and vice versa)
+
+    if (_DOMImageElement)
+    {
+        if ((isIMGImageElement && isCSSBasedImage) || (!isIMGImageElement && !isCSSBasedImage))
+        {
+            // OK, destroy it
+
+            _DOMElement.removeChild(_DOMImageElement);
+
+            _DOMImageElement = nil;
+
+            // CSS styling cleaning
+            _cssStylePreviousState = @[];
+            _cssStyleNode = nil;
+        }
+        else
+            return;
+    }
+
+    _DOMImageElement = document.createElement(isCSSBasedImage ? "div" : "img");
     _DOMImageElement.style.position = "absolute";
     _DOMImageElement.style.left = "0px";
     _DOMImageElement.style.top = "0px";
@@ -149,10 +174,15 @@ var CPImageViewEmptyPlaceholderImage = nil;
     var newImage = [self objectValue];
 
 #if PLATFORM(DOM)
-    if (!_DOMImageElement)
-        [self _createDOMImageElement];
+    [self _createDOMImageElement];
 
-    _DOMImageElement.src = newImage ? [newImage filename] : [CPImageViewEmptyPlaceholderImage filename];
+    if ([newImage isCSSBased])
+        _cssStyleNode = [newImage applyCSSImageForView:self
+                                          onDOMElement:_DOMImageElement
+                                             styleNode:_cssStyleNode
+                                         previousState:@ref(_cssStylePreviousState)];
+    else
+        _DOMImageElement.src = newImage ? [newImage filename] : [CPImageViewEmptyPlaceholderImage filename];
 #endif
 
     var size = [newImage size];
@@ -178,6 +208,7 @@ var CPImageViewEmptyPlaceholderImage = nil;
 
 - (void)imageDidLoad:(CPNotification)aNotification
 {
+    [[CPNotificationCenter defaultCenter] removeObserver:self name:CPImageDidLoadNotification object:[self objectValue]];
     [self hideOrDisplayContents];
 
     [self setNeedsLayout];
@@ -415,6 +446,18 @@ var CPImageViewEmptyPlaceholderImage = nil;
 #endif
     }
 
+#if PLATFORM(DOM)
+    if ([image isCSSBased] && [image _shouldBeResized])
+    {
+        [image _setDisplaySize:CGSizeMake(ROUND(width), ROUND(height))];
+
+        _cssStyleNode = [image applyCSSImageForView:self
+                                       onDOMElement:_DOMImageElement
+                                          styleNode:_cssStyleNode
+                                      previousState:@ref(_cssStylePreviousState)];
+    }
+#endif
+
     _imageRect = CGRectMake(x, y, width, height);
 
     if (_hasShadow)

AppKit/CPKeyBinding.j

@@ -30,6 +30,7 @@ CPStandardKeyBindings = {
     @"@.": @"cancelOperation:",
 
     @"@a": @"selectAll:",
+    @"@~$v": @"pasteAsPlainText:",
     @"^a": @"moveToBeginningOfParagraph:",
     @"^$a": @"moveToBeginningOfParagraphAndModifySelection:",
     @"^b": @"moveBackward:",

AppKit/CPKeyValueBinding.j

@@ -35,6 +35,7 @@
 var exposedBindingsMap = @{},
     bindingsMap = @{};
 
+@typedef CPBindingOperationKind
 var CPBindingOperationAnd = 0,
     CPBindingOperationOr  = 1;
 
@@ -70,6 +71,20 @@ var CPBindingOperationAnd = 0,
     return [[bindingsMap objectForKey:[anObject UID]] objectForKey:aBinding];
 }
 
++ (void)_reverseSetValueFromExclusiveBinderForObject:(id)anObject
+{
+    var bindersByBindingName = [bindingsMap objectForKey:[anObject UID]];
+
+    [bindersByBindingName enumerateKeysAndObjectsUsingBlock:function(binding, binder, stop)
+    {
+        if ([binder isKindOfClass:[self class]])
+        {
+            [binder reverseSetValueFor:binding];
+            stop(YES);
+        }
+    }];
+}
+
 + (CPDictionary)infoForBinding:(CPString)aBinding forObject:(id)anObject
 {
     var theBinding = [self getBinding:aBinding forObject:anObject];
@@ -116,7 +131,7 @@ var CPBindingOperationAnd = 0,
         count = allKeys.length;
 
     while (count--)
-        [anObject unbind:[bindings objectForKey:allKeys[count]]];
+        [anObject unbind:allKeys[count]];
 
     [bindingsMap removeObjectForKey:[anObject UID]];
 }
@@ -142,7 +157,7 @@ var CPBindingOperationAnd = 0,
 
         [self _updatePlaceholdersWithOptions:options forBinding:aName];
 
-        [aDestination addObserver:self forKeyPath:aKeyPath options:CPKeyValueObservingOptionNew context:aBinding];
+        [aDestination addObserver:self forKeyPath:aKeyPath options:0 context:aBinding];
 
         var bindings = [bindingsMap objectForKey:[_source UID]];
 
@@ -159,6 +174,24 @@ var CPBindingOperationAnd = 0,
     return self;
 }
 
++ (BOOL)isBindingAllowed:(CPString)aBinding forObject:(id)anObject
+{
+    if ([[anObject class] isBindingExclusive:aBinding])
+    {
+        var bindingsForObject = [bindingsMap objectForKey:[anObject UID]],
+            allBindings = [bindingsForObject allKeys],
+            count = [allBindings count];
+
+        while (count--)
+        {
+            if ([[anObject class] isBindingExclusive:allBindings[count]])
+                return NO;
+        }
+    }
+
+    return YES;
+}
+
 - (void)raiseIfNotApplicable:(id)aValue forKeyPath:(CPString)keyPath options:(CPDictionary)options
 {
     if (aValue === CPNotApplicableMarker && [options objectForKey:CPRaisesForNotApplicableKeysBindingOption])
@@ -175,7 +208,11 @@ var CPBindingOperationAnd = 0,
         options = [_info objectForKey:CPOptionsKey],
         newValue = [destination valueForKeyPath:keyPath];
 
-    if (CPIsControllerMarker(newValue))
+    // give nil values the chance to be transformed to true via CPNegateBoolean (issue #1986)
+    if ((newValue == nil || CPIsControllerMarker(newValue)) && [options objectForKey:CPValueTransformerNameBindingOption] === CPNegateBooleanTransformerName)
+        [self setValue:[self transformValue:NO withOptions:options] forBinding:theBinding];
+
+    else if (CPIsControllerMarker(newValue))
     {
         [self raiseIfNotApplicable:newValue forKeyPath:keyPath options:options];
 
@@ -260,7 +297,7 @@ var CPBindingOperationAnd = 0,
     // If the value is nil AND the source doesn't respond to setPlaceholderString: then
     // we set the value to the placeholder. Otherwise, we do not want to short cut the process
     // of setting the placeholder that is based on the fact that the value is nil.
-    if ((aValue === undefined || aValue === nil || aValue === [CPNull null])
+    if ((aValue == nil || aValue === [CPNull null])
         && ![_source respondsToSelector:@selector(setPlaceholderString:)])
         aValue = [options objectForKey:CPNullPlaceholderBindingOption] || nil;
 
@@ -387,6 +424,11 @@ var CPBindingOperationAnd = 0,
     return [CPBinder class];
 }
 
++ (BOOL)isBindingExclusive:(CPString)aBinding
+{
+    return NO;
+}
+
 - (CPArray)exposedBindings
 {
     var exposedBindings = [],
@@ -415,6 +457,11 @@ var CPBindingOperationAnd = 0,
     if (!anObject || !aKeyPath)
         return CPLog.error("Invalid object or path on " + self + " for " + aBinding);
 
+    if (![CPBinder isBindingAllowed:aBinding forObject:self])
+    {
+        CPLog.warn([self description] + " : cannot bind " + aBinding + " because another binding with the same functionality is already in use.");
+        return;
+    }
     //if (![[self exposedBindings] containsObject:aBinding])
     //    CPLog.warn("No binding exposed on " + self + " for " + aBinding);
 
@@ -610,7 +657,7 @@ var CPBindingOperationAnd = 0,
             keyPath = [info objectForKey:CPObservedKeyPathKey],
             value   = [object valueForKeyPath:keyPath];
 
-        if (value === nil || value === undefined)
+        if (value == nil)
         {
             [_source setEnabled:NO];
             return;
@@ -753,7 +800,7 @@ var CPBindingOperationAnd = 0,
         else
             value = [theBinding transformValue:value withOptions:options];
 
-        if (value === nil || value === undefined)
+        if (value == nil)
             value = @"";
 
         result.value = result.value.replace("%{" + _patternPlaceholder + count + "}@", [value description]);
@@ -814,7 +861,7 @@ var CPBindingOperationAnd = 0,
 - (id)initWithName:(CPString)aName
 {
     if (self = [super init])
-        _name = aName
+        _name = aName;
 
     return self;
 }
@@ -875,6 +922,7 @@ CPTextColorBinding                        = @"textColor";
 CPTitleBinding                            = @"title";
 CPToolTipBinding                          = @"toolTip";
 CPValueBinding                            = @"value";
+CPAttributedStringBinding                 = @"attributedString";
 CPValueURLBinding                         = @"valueURL";
 CPValuePathBinding                        = @"valuePath";
 CPDataBinding                             = @"data";

AppKit/CPLevelIndicator.j

@@ -22,14 +22,11 @@
 
 @import "CPControl.j"
 @import "CPWindow_Constants.j"
+@import "CPSlider.j"
 
 @global CPApp
 
-CPTickMarkBelow                             = 0;
-CPTickMarkAbove                             = 1;
-CPTickMarkLeft                              = CPTickMarkAbove;
-CPTickMarkRight                             = CPTickMarkBelow;
-
+@typedef CPLevelIndicatorStyle
 CPRelevancyLevelIndicatorStyle              = 0;
 CPContinuousCapacityLevelIndicatorStyle     = 1;
 CPDiscreteCapacityLevelIndicatorStyle       = 2;
@@ -105,10 +102,21 @@ CPRatingLevelIndicatorStyle                 = 3;
     var filledColor = [self valueForThemeAttribute:@"color-normal"],
         value = [self doubleValue];
 
-    if (value <= _criticalValue)
-        filledColor = [self valueForThemeAttribute:@"color-critical"];
-    else if (value <= _warningValue)
-        filledColor = [self valueForThemeAttribute:@"color-warning"];
+    if (_warningValue < _criticalValue)
+    {
+        if (value >= _criticalValue)
+            filledColor = [self valueForThemeAttribute:@"color-critical"];
+        else if (value >= _warningValue)
+            filledColor = [self valueForThemeAttribute:@"color-warning"];
+    }
+    else
+    {
+        if (value <= _criticalValue)
+            filledColor = [self valueForThemeAttribute:@"color-critical"];
+        else if (value <= _warningValue)
+            filledColor = [self valueForThemeAttribute:@"color-warning"];
+    }
+
 
     for (var i = 0; i < segmentCount; i++)
     {
@@ -279,7 +287,7 @@ CPRatingLevelIndicatorStyle                 = 3;
     [self setNeedsLayout];
 }
 
-- (void)setWarningValue:(double)warningValue;
+- (void)setWarningValue:(double)warningValue
 {
     if (_warningValue === warningValue)
         return;
@@ -288,7 +296,7 @@ CPRatingLevelIndicatorStyle                 = 3;
     [self setNeedsLayout];
 }
 
-- (void)setCriticalValue:(double)criticalValue;
+- (void)setCriticalValue:(double)criticalValue
 {
     if (_criticalValue === criticalValue)
         return;

AppKit/CPMenu/CPMenu.j

@@ -27,9 +27,21 @@
 
 @import "CPKeyValueBinding.j"
 @import "CPMenuItem.j"
+@import "CALayer.j"
 
 @global CPApp
 
+@protocol CPMenuDelegate <CPObject>
+
+@optional
+- (void)menuWillOpen:(CPMenu)aMenu;
+- (void)menuDidClose:(CPMenu)aMenu;
+
+@end
+
+var CPMenuDelegate_menuWillOpen_ = 1 << 1,
+    CPMenuDelegate_menuDidClose_ = 1 << 2;
+
 CPMenuDidAddItemNotification        = @"CPMenuDidAddItemNotification";
 CPMenuDidChangeItemNotification     = @"CPMenuDidChangeItemNotification";
 CPMenuDidRemoveItemNotification     = @"CPMenuDidRemoveItemNotification";
@@ -50,26 +62,27 @@ var _CPMenuBarVisible               = NO,
 */
 @implementation CPMenu : CPObject
 {
-    CPMenu          _supermenu;
+    CPMenu              _supermenu;
 
-    CPString        _title;
-    CPString        _name;
+    CPString            _title;
+    CPString            _name;
 
-    CPFont          _font;
+    CPFont              _font;
 
-    float           _minimumWidth;
+    float               _minimumWidth;
 
-    CPMutableArray  _items;
+    CPMutableArray      _items;
 
-    BOOL            _autoenablesItems;
-    BOOL            _showsStateColumn;
+    BOOL                _autoenablesItems;
+    BOOL                _showsStateColumn;
 
-    id              _delegate;
+    id <CPMenuDelegate> _delegate;
+    unsigned            _implementedDelegateMethods;
 
-    int             _highlightedIndex;
-    _CPMenuWindow   _menuWindow;
+    int                 _highlightedIndex;
+    _CPMenuWindow       _menuWindow;
 
-    CPEvent         _lastCloseEvent;
+    CPEvent             _lastCloseEvent;
 }
 
 // Managing the Menu Bar
@@ -152,7 +165,7 @@ var _CPMenuBarVisible               = NO,
 
 + (void)_setOrRemoveMenuBarAttribute:(id)aValue forKey:(id)aKey
 {
-    if (aValue === nil)
+    if (aValue == nil)
         [_CPMenuBarAttributes removeObjectForKey:aKey];
     else
         [_CPMenuBarAttributes setObject:aValue forKey:aKey];
@@ -256,7 +269,8 @@ var _CPMenuBarVisible               = NO,
     if (self)
     {
         _title = aTitle;
-        _items = [];
+        // Use CPMutableArray instead of raw JS array for consistency with removeAllItems
+        _items = [CPMutableArray array]; 
 
         _autoenablesItems = YES;
         _showsStateColumn = YES;
@@ -361,6 +375,10 @@ var _CPMenuBarVisible               = NO,
     [self willChangeValueForKey:@"items"];
     _items = [CPMutableArray array];
     [self didChangeValueForKey:@"items"];
+    
+    // Ensure the main menu updates if cleared
+    if (self === [CPApp mainMenu] && _CPMenuBarSharedWindow)
+        [_CPMenuBarSharedWindow setMenu:self];
 }
 
 /*!
@@ -377,6 +395,9 @@ var _CPMenuBarVisible               = NO,
     if ([aMenuItem menu] !== self || !_items)
         return;
 
+    if (_menuWindow)
+        [[_menuWindow _menuView] tile];
+
     [aMenuItem setValue:[aMenuItem valueForKey:@"changeCount"] + 1 forKey:@"changeCount"];
 
     [[CPNotificationCenter defaultCenter]
@@ -639,6 +660,7 @@ var _CPMenuBarVisible               = NO,
         if (binder)
         {
             [binder setValueFor:CPEnabledBinding];
+            [[_menuWindow _menuView] tile];
             return;
         }
 
@@ -941,9 +963,19 @@ var _CPMenuBarVisible               = NO,
 
 // Managing the Delegate
 
-- (void)setDelegate:(id)aDelegate
+- (void)setDelegate:(id <CPMenuDelegate>)aDelegate
 {
+    if (_delegate === aDelegate)
+        return;
+
     _delegate = aDelegate;
+    _implementedDelegateMethods = 0;
+
+    if ([_delegate respondsToSelector:@selector(menuWillOpen:)])
+         _implementedDelegateMethods |= CPMenuDelegate_menuWillOpen_;
+
+    if ([_delegate respondsToSelector:@selector(menuDidClose:)])
+        _implementedDelegateMethods |= CPMenuDelegate_menuDidClose_;
 }
 
 - (id)delegate
@@ -953,10 +985,7 @@ var _CPMenuBarVisible               = NO,
 
 - (void)_menuWillOpen
 {
-    var delegate = [self delegate];
-
-    if ([delegate respondsToSelector:@selector(menuWillOpen:)])
-        [delegate menuWillOpen:self];
+    [self _sendDelegateMenuWillOpen];
 }
 
 - (void)_menuDidClose
@@ -965,10 +994,7 @@ var _CPMenuBarVisible               = NO,
     // when a click on the button itself caused the menu to close.
     _lastCloseEvent = [CPApp currentEvent];
 
-    var delegate = [self delegate];
-
-    if ([delegate respondsToSelector:@selector(menuDidClose:)])
-        [delegate menuDidClose:self];
+    [self _sendDelegateMenuDidClose];
 }
 
 // Handling Tracking
@@ -999,6 +1025,10 @@ var _CPMenuBarVisible               = NO,
     // an additional mouse move after all this, but not in other browsers.
     // This will be fixed correctly with the coming run loop changes.
     [_CPDisplayServer run];
+    
+    // If layers are updated within the menu callback, the re-draw & re-layout doesn't occur until a mouse move. 
+    // We force the update here.
+    [CALayer runLoopUpdateLayers];
 }
 
 /* @ignore */
@@ -1040,7 +1070,23 @@ var _CPMenuBarVisible               = NO,
         if ([anEvent _triggersKeyEquivalent:[item keyEquivalent] withModifierMask:[item keyEquivalentModifierMask]])
         {
             if ([item isEnabled])
+            {
+                // Flash the top-level item if this is the Main Menu
+                if (self === [CPApp mainMenu])
+                    [self _flashItemAtIndex:index];
+
+                anEvent._isKeyEquivalent = YES; // prevent the menu keystroke from beeing inserted into textview
                 [self performActionForItemAtIndex:index];
+
+#if PLATFORM(DOM)
+                // we are done with this event in cappuccino space. do not let the browser do something weird additionally (e.g. command-o).
+                // but we must not stop copy/paste events as these can only be handled by the browser at this time even if they are in our menu
+                // (until we move to CPTextView as the fieleditor)
+
+                if (characters != "c" && characters != "x" && characters != "v")
+                    _CPDOMEventStop(anEvent._DOMEvent);
+#endif
+            }
             else
             {
                 //beep?
@@ -1050,7 +1096,13 @@ var _CPMenuBarVisible               = NO,
         }
 
         if ([[item submenu] performKeyEquivalent:anEvent])
+        {
+            // Flash the top-level item if a submenu handled the event
+            if (self === [CPApp mainMenu])
+                [self _flashItemAtIndex:index];
+
             return YES;
+        }
    }
 
    return NO;
@@ -1114,7 +1166,7 @@ var _CPMenuBarVisible               = NO,
     }
 }
 
-- (void)_menuWithName:(CPString)aName
+- (CPMenu)_menuWithName:(CPString)aName
 {
     if (aName === _name)
         return self;
@@ -1130,8 +1182,57 @@ var _CPMenuBarVisible               = NO,
     return nil;
 }
 
+//
+/*
+    @ignore
+*/
+- (void)_flashItemAtIndex:(int)anIndex
+{
+    // If we are using a native bridge (like a desktop wrapper), let the OS handle the visual feedback.
+    if ([CPPlatform supportsNativeMainMenu])
+        return;
+
+    [self _highlightItemAtIndex:anIndex];
+    [self performSelector:@selector(_stopFlashingItem) withObject:nil afterDelay:0.2];
+}
+
+- (void)_stopFlashingItem
+{
+    [self _highlightItemAtIndex:CPNotFound];
+}
+
 @end
 
+
+@implementation CPMenu (CPMenuDelegate)
+
+/*!
+    @ignore
+    Call delegate menuWillOpen
+*/
+- (void)_sendDelegateMenuWillOpen
+{
+    if (!(_implementedDelegateMethods & CPMenuDelegate_menuWillOpen_))
+        return;
+
+    [_delegate menuWillOpen:self];
+}
+
+/*!
+    @ignore
+    Call delegate menuDidClose
+*/
+- (void)_sendDelegateMenuDidClose
+{
+    if (!(_implementedDelegateMethods & CPMenuDelegate_menuDidClose_))
+        return;
+
+    [_delegate menuDidClose:self];
+}
+
+@end
+
+
 @implementation CPMenu (CPKeyValueCoding)
 
 - (CPUInteger)countOfItems
@@ -1171,6 +1272,11 @@ var _CPMenuBarVisible               = NO,
         postNotificationName:CPMenuDidAddItemNotification
                       object:self
                     userInfo:@{ @"CPMenuItemIndex": anIndex }];
+
+    // FIX #1222: If this is the main menu, force the shared menu bar window to refresh its layout.
+    // This ensures new items are positioned correctly (e.g. not pushed to the far right by previous layout states).
+    if (self === [CPApp mainMenu] && _CPMenuBarSharedWindow)
+        [_CPMenuBarSharedWindow setMenu:self];
 }
 
 - (void)removeObjectFromItemsAtIndex:(CPUInteger)anIndex
@@ -1186,6 +1292,10 @@ var _CPMenuBarVisible               = NO,
         postNotificationName:CPMenuDidRemoveItemNotification
                       object:self
                     userInfo:@{ @"CPMenuItemIndex": anIndex }];
+    
+    // FIX #1222: Ensure the shared menu bar updates layout when items are removed.
+    if (self === [CPApp mainMenu] && _CPMenuBarSharedWindow)
+        [_CPMenuBarSharedWindow setMenu:self];
 }
 
 @end
@@ -1246,6 +1356,36 @@ var CPMenuTitleKey              = @"CPMenuTitleKey",
 
 @end
 
+// MARK: -
+
+@implementation CPMenu (CSSTheming)
+
++ (void)setNamedValue:(CPString)aName forKey:(CPString)aKey inAttributes:(CPDictionary)aDictionary forTheme:(CPTheme)aTheme
+{
+    var value = [aTheme valueForAttributeWithName:aName forClass:_CPMenuView];
+
+    if (value)
+        [aDictionary setObject:value forKey:aKey];
+    else
+        [aDictionary removeObjectForKey:aKey];
+}
+
++ (void)updateMenuBarAttributesWithTheme:(CPTheme)aTheme
+{
+    var newAttributes = @{};
+
+    [CPMenu setNamedValue:@"menu-bar-text-color"                  forKey:@"CPMenuBarTextColor"                inAttributes:newAttributes forTheme:aTheme];
+    [CPMenu setNamedValue:@"menu-bar-title-color"                 forKey:@"CPMenuBarTitleColor"               inAttributes:newAttributes forTheme:aTheme];
+    [CPMenu setNamedValue:@"menu-bar-text-shadow-color"           forKey:@"CPMenuBarTextShadowColor"          inAttributes:newAttributes forTheme:aTheme];
+    [CPMenu setNamedValue:@"menu-bar-title-shadow-color"          forKey:@"CPMenuBarTitleShadowColor"         inAttributes:newAttributes forTheme:aTheme];
+    [CPMenu setNamedValue:@"menu-bar-highlight-color"             forKey:@"CPMenuBarHighlightColor"           inAttributes:newAttributes forTheme:aTheme];
+    [CPMenu setNamedValue:@"menu-bar-highlight-text-color"        forKey:@"CPMenuBarHighlightTextColor"       inAttributes:newAttributes forTheme:aTheme];
+    [CPMenu setNamedValue:@"menu-bar-highlight-text-shadow-color" forKey:@"CPMenuBarHighlightTextShadowColor" inAttributes:newAttributes forTheme:aTheme];
+
+    [CPMenu setMenuBarAttributes:newAttributes];
+}
+
+@end
+
 @import "_CPMenuBarWindow.j"
 @import "_CPMenuWindow.j"
-

AppKit/CPMenu/_CPMenuBarWindow.j

@@ -24,14 +24,17 @@
 @import "_CPMenuManager.j"
 
 @class _CPMenuView
+@class CPMenu
+@class CPMenuItem
 
 @global CPMenuDidAddItemNotification
 @global CPMenuDidChangeItemNotification
 @global CPMenuDidRemoveItemNotification
 
+@global document
+
 @implementation _CPMenuBarWindow : CPPanel
 {
-    CPMenu      _menu;
     CPView      _highlightView;
     CPArray     _menuItemViews;
 
@@ -129,10 +132,12 @@
 
 - (void)setColor:(CPColor)aColor
 {
+    var targetView = [[CPTheme defaultTheme] valueForAttributeWithName:@"css-based" forClass:CPView] ? [[self contentView] superview] : [self contentView];
+
     if (!aColor)
-        [[self contentView] setBackgroundColor:[[CPTheme defaultTheme] valueForAttributeWithName:@"menu-bar-window-background-color" forClass:_CPMenuView]];
+        [targetView setBackgroundColor:[[CPTheme defaultTheme] valueForAttributeWithName:@"menu-bar-window-background-color" forClass:_CPMenuView]];
     else
-        [[self contentView] setBackgroundColor:aColor];
+        [targetView setBackgroundColor:aColor];
 }
 
 - (void)setTextColor:(CPColor)aColor
@@ -277,6 +282,16 @@
         [menuItemView setTextColor:_textColor];
         [menuItemView setHidden:[item isHidden]];
 
+        // If first menu item has tag -1 and if there is a special theme value menu-bar-window-first-item-font,
+        // set the corresponding font. This is used to set bold on the first item of the menubar (à la Cocoa)
+        if ((index == 0) && ([item tag] == -1))
+        {
+            var firstItemFont = [[CPTheme defaultTheme] valueForAttributeWithName:@"menu-bar-window-first-item-font" forClass:_CPMenuView];
+
+            if (firstItemFont)
+                [item setFont:firstItemFont];
+        }
+
         [menuItemView synchronizeWithMenuItem];
 
         [contentView addSubview:menuItemView];
@@ -350,17 +365,46 @@
 
 - (CPFont)font
 {
-    [CPFont systemFontOfSize:[CPFont systemFontSize]];
+    return [CPFont systemFontOfSize:[CPFont systemFontSize]];
 }
 
 - (void)tile
 {
+    var bounds = [[self contentView] bounds],
+        height = CGRectGetHeight(bounds),
+        x = [[CPTheme defaultTheme] valueForAttributeWithName:@"menu-bar-window-left-margin" forClass:_CPMenuView];
+
+    // 1. Layout the Icon (if present)
+    if (_iconImageView && ![_iconImageView isHidden])
+    {
+        var iconFrame = [_iconImageView frame];
+
+        iconFrame.origin.x = x;
+        // Vertically center
+        iconFrame.origin.y = (height - CGRectGetHeight(iconFrame)) / 2.0;
+
+        [_iconImageView setFrame:iconFrame];
+
+        x = CGRectGetMaxX(iconFrame) + 6.0; // Spacing between icon and title
+    }
+
+    // 2. Layout the Title (if present)
+    if (_titleField && [_titleField stringValue] && [[_titleField stringValue] length] > 0)
+    {
+        var titleFrame = [_titleField frame];
+
+        titleFrame.origin.x = x;
+        titleFrame.origin.y = (height - CGRectGetHeight(titleFrame)) / 2.0;
+
+        [_titleField setFrame:titleFrame];
+
+        x = CGRectGetMaxX(titleFrame) + 12.0; // Spacing between title and menu items
+    }
+
+    // 3. Layout the Menu Items
     var items = [_menu itemArray],
         index = 0,
-        count = items.length,
-
-        x = [[CPTheme defaultTheme] valueForAttributeWithName:@"menu-bar-window-left-margin" forClass:_CPMenuView],
-        y = 0.0,
+        count = items ? items.length : 0,
         isLeftAligned = YES;
 
     for (; index < count; ++index)
@@ -375,11 +419,18 @@
             continue;
         }
 
-         if ([item isHidden])
+        // Fix for #1742: If a main menu item does not have a submenu, it should not appear in the menu bar.
+        if ([item isHidden] || ![item submenu])
+        {
+            [[item _menuItemView] setHidden:YES];
             continue;
+        }
 
-        var menuItemView = [item _menuItemView],
-            frame = [menuItemView frame];
+        var menuItemView = [item _menuItemView];
+
+        [menuItemView setHidden:NO];
+
+        var frame = [menuItemView frame];
 
         if (isLeftAligned)
         {
@@ -394,21 +445,6 @@
             x = CGRectGetMinX([menuItemView frame]);
         }
     }
-
-    var bounds = [[self contentView] bounds],
-        titleFrame = [_titleField frame];
-
-    if ([_iconImageView isHidden])
-        [_titleField setFrameOrigin:CGPointMake((CGRectGetWidth(bounds) - CGRectGetWidth(titleFrame)) / 2.0, (CGRectGetHeight(bounds) - CGRectGetHeight(titleFrame)) / 2.0)];
-    else
-    {
-        var iconFrame = [_iconImageView frame],
-            iconWidth = CGRectGetWidth(iconFrame),
-            totalWidth = iconWidth + CGRectGetWidth(titleFrame);
-
-        [_iconImageView setFrameOrigin:CGPointMake((CGRectGetWidth(bounds) - totalWidth) / 2.0, (CGRectGetHeight(bounds) - CGRectGetHeight(iconFrame)) / 2.0)];
-        [_titleField setFrameOrigin:CGPointMake((CGRectGetWidth(bounds) - totalWidth) / 2.0 + iconWidth, (CGRectGetHeight(bounds) - CGRectGetHeight(titleFrame)) / 2.0)];
-    }
 }
 
 - (void)setFrame:(CGRect)aRect display:(BOOL)shouldDisplay animate:(BOOL)shouldAnimate
@@ -449,13 +485,18 @@
     {
         var item = items[index];
 
-        if ([item isHidden] || [item isSeparatorItem])
+        if ([item isHidden] || [item isSeparatorItem] || ![item submenu])
             continue;
 
         if (CGRectContainsPoint([self rectForItemAtIndex:index], aPoint))
             return index;
     }
 
+    // If the mouse is within the menu bar bounds but not over an item
+    // (e.g. dragging far left or right), force the menu to unhighlight.
+    if (CGRectContainsPoint([[self contentView] bounds], aPoint))
+        [_menu _highlightItemAtIndex:CPNotFound];
+
     return CPNotFound;
 }
 

AppKit/CPMenu/_CPMenuManager.j

@@ -28,6 +28,8 @@
 
 @class CPWindow
 @class _CPMenuWindow
+@class _CPMenuView
+@class CPMenuItem
 
 
 @global CPApp
@@ -223,7 +225,7 @@ var STICKY_TIME_INTERVAL            = 0.4,
     _lastGlobalLocation = globalLocation;
 
     // If the item isn't enabled its as if we clicked on nothing.
-    if (![activeItem isEnabled] || [activeItem _isMenuBarButton])
+    if ([activeItem _isMenuBarButton])
     {
         activeItemIndex = CPNotFound;
         activeItem = nil;
@@ -352,7 +354,23 @@ var STICKY_TIME_INTERVAL            = 0.4,
         if ([activeMenuContainer isMenuBar])
             newMenuOrigin = CGPointMake(CGRectGetMinX(activeItemRect), CGRectGetMaxY(activeItemRect));
         else
-            newMenuOrigin = CGPointMake(CGRectGetMaxX(activeItemRect), CGRectGetMinY(activeItemRect));
+        {
+            // New theme attributes to have more precise submenus positioning
+
+            var defaultTheme     = [CPTheme defaultTheme],
+                themeDeltaX      = [defaultTheme valueForAttributeWithName:@"menu-window-submenu-delta-x" forClass:_CPMenuView],
+                themeDeltaY      = [defaultTheme valueForAttributeWithName:@"menu-window-submenu-delta-y" forClass:_CPMenuView],
+                themeFirstDeltaY = [defaultTheme valueForAttributeWithName:@"menu-window-submenu-first-level-delta-y" forClass:_CPMenuView],
+                activeMenuIndex  = [_menuContainerStack indexOfObject:activeMenuContainer],
+
+                deltaX = themeDeltaX ? themeDeltaX : 0,
+                deltaY = themeDeltaY ? themeDeltaY : 0;
+
+            if (themeFirstDeltaY && (activeMenuIndex == 1) && [_menuContainerStack[0] isMenuBar])
+                deltaY += themeFirstDeltaY;
+
+            newMenuOrigin = CGPointMake(CGRectGetMaxX(activeItemRect)+deltaX, CGRectGetMinY(activeItemRect)+deltaY);
+        }
 
         newMenuOrigin = [activeMenuContainer convertBaseToGlobal:newMenuOrigin];
 
@@ -553,7 +571,7 @@ var STICKY_TIME_INTERVAL            = 0.4,
         var iter = [selectorNames objectEnumerator],
             obj;
 
-        while ((obj = [iter nextObject]) !== nil)
+        while ((obj = [iter nextObject]) != nil)
         {
             var aSelector = CPSelectorFromString(obj);
 
@@ -580,6 +598,8 @@ var STICKY_TIME_INTERVAL            = 0.4,
         [self selectNextItemBeginningWith:_keyBuffer inMenu:menu];
         _lastGlobalLocation = nil;
     }
+
+    [[[anEvent window] platformWindow] _propagateCurrentDOMEvent:NO];
 }
 
 - (void)selectNextItemBeginningWith:(CPString)characters inMenu:(CPMenu)menu
@@ -587,7 +607,7 @@ var STICKY_TIME_INTERVAL            = 0.4,
     var iter = [[menu itemArray] objectEnumerator],
         obj;
 
-    while ((obj = [iter nextObject]) !== nil)
+    while ((obj = [iter nextObject]) != nil)
     {
         if ([obj isHidden] || ![obj isEnabled])
             continue;
@@ -725,39 +745,32 @@ var STICKY_TIME_INTERVAL            = 0.4,
 
 - (void)moveDown:(CPMenu)menu
 {
-    var index = menu._highlightedIndex + 1;
+    var index = menu._highlightedIndex + 1,
+        item;
+
+    // Search for the next enabled item
+    while ((index < [menu numberOfItems]) && (item = [menu itemAtIndex:index]) && ([item isSeparatorItem] || [item isHidden] || ![item isEnabled]))
+        index++;
 
     if (index < [menu numberOfItems])
-    {
         [menu _highlightItemAtIndex:index];
-
-        var item = [menu highlightedItem];
-
-        if ([item isSeparatorItem] || [item isHidden] || ![item isEnabled])
-            [self moveDown:menu];
-    }
     else if (menu == [CPApp mainMenu])
          [menu _highlightItemAtIndex:0];
 }
 
 - (void)moveUp:(CPMenu)menu
 {
-    var index = menu._highlightedIndex - 1;
+    var index = menu._highlightedIndex - 1,
+        item;
 
-    if (index < 0)
-    {
-        if (index != CPNotFound || menu == [CPApp mainMenu])
-            [menu _highlightItemAtIndex:[menu numberOfItems] - 1];
+    // Search for the previous enabled item
+    while ((index >= 0) && (item = [menu itemAtIndex:index]) && ([item isSeparatorItem] || [item isHidden] || ![item isEnabled]))
+        index--;
 
-        return;
-    }
-
-    [menu _highlightItemAtIndex:index];
-
-    var item = [menu highlightedItem];
-
-    if ([item isSeparatorItem] || [item isHidden] || ![item isEnabled])
-        [self moveUp:menu];
+    if (index >= 0)
+        [menu _highlightItemAtIndex:index];
+    else if (menu == [CPApp mainMenu])
+        [menu _highlightItemAtIndex:[menu numberOfItems] - 1];
 }
 
 - (void)insertNewline:(CPMenu)menu

AppKit/CPMenu/_CPMenuWindow.j

@@ -25,6 +25,9 @@
 @import "CPWindow.j"
 @import "_CPMenuManager.j"
 
+@class _CPMenuView
+@class CPMenuItem
+
 var _CPMenuWindowPool                       = [],
     _CPMenuWindowPoolCapacity               = 5,
 
@@ -231,6 +234,19 @@ _CPMenuWindowAttachedMenuBackgroundStyle    = 2;
     // FIXME: This gets called far too often.
     _unconstrainedFrame = CGRectMakeCopy(aFrame);
 
+    // If we are a submenu and we are being displayed off the right of the screen,
+    // we should try and display on the left of our supermenu.
+    var supermenu = [[self menu] supermenu];
+    if (supermenu && (CGRectGetMaxX(_unconstrainedFrame) > CGRectGetMaxX(_constraintRect)))
+    {
+        var supermenuWindow = supermenu._menuWindow;
+        if (supermenuWindow)
+        {
+            var supermenuFrame = [supermenuWindow frame];
+            _unconstrainedFrame.origin.x = CGRectGetMinX(supermenuFrame) - CGRectGetWidth(_unconstrainedFrame);
+        }
+    }
+
     var constrainedFrame = CGRectIntersection(_unconstrainedFrame, _constraintRect),
         marginInset = [_menuView valueForThemeAttribute:@"menu-window-margin-inset"],
         scrollIndicatorHeight = [_menuView valueForThemeAttribute:@"menu-window-scroll-indicator-height"];
@@ -410,13 +426,28 @@ _CPMenuWindowAttachedMenuBackgroundStyle    = 2;
 {
     // Don't return indexes of items that aren't visible.
     if (!CGRectContainsPoint([_menuClipView bounds], [_menuClipView convertPoint:aPoint fromView:nil]))
-        return NO;
+        return CPNotFound;
 
     return [_menuView itemIndexAtPoint:[_menuView convertPoint:aPoint fromView:nil]];
 }
 
 @end
 
+// MARK: -
+
+@implementation _CPMenuWindow (CSSTheming)
+
+- (void)_setThemeIncludingDescendants:(CPTheme)aTheme
+{
+    [[self contentView] _setThemeIncludingDescendants:aTheme];
+    [_menuView _setThemeIncludingDescendants:aTheme];
+    [_menuView tile];
+}
+
+@end
+
+// MARK: -
+
 /*
     @ignore
 */
@@ -447,6 +478,7 @@ _CPMenuWindowAttachedMenuBackgroundStyle    = 2;
             @"menu-bar-window-background-color": [CPNull null],
             @"menu-bar-window-background-selected-color": [CPNull null],
             @"menu-bar-window-font": [CPNull null],
+            @"menu-bar-window-first-item-font": [CPNull null],
             @"menu-bar-window-height": 30.0,
             @"menu-bar-window-margin": 10.0,
             @"menu-bar-window-left-margin": 10.0,
@@ -464,6 +496,9 @@ _CPMenuWindowAttachedMenuBackgroundStyle    = 2;
             @"menu-general-icon-new": [CPNull null],
             @"menu-general-icon-save": [CPNull null],
             @"menu-general-icon-open": [CPNull null],
+            @"menu-window-submenu-delta-x": 0.0,
+            @"menu-window-submenu-delta-y": 0.0,
+            @"menu-window-submenu-first-level-delta-y": 0.0
         };
 }
 
@@ -550,6 +585,7 @@ _CPMenuWindowAttachedMenuBackgroundStyle    = 2;
 
         [view setFrameOrigin:CGPointMake(0.0, y)];
 
+        [view _setThemeIncludingDescendants:[CPTheme defaultTheme]];
         [self addSubview:view];
 
         var size = [view minSize],
@@ -580,3 +616,18 @@ _CPMenuWindowAttachedMenuBackgroundStyle    = 2;
 }
 
 @end
+
+// MARK: -
+
+@implementation _CPMenuView (CSSTheming)
+
+- (void)_setThemeIncludingDescendants:(CPTheme)aTheme
+{
+    [self setTheme:aTheme];
+    [_menuItemViews makeObjectsPerformSelector:@selector(_setThemeIncludingDescendants:) withObject:aTheme];
+
+    for (var i = 0, items = [[self menu] itemArray], count = [items count]; i < count; i++)
+        [[items[i] _menuItemView] _setThemeIncludingDescendants:aTheme];
+}
+
+@end

AppKit/CPMenuItem/CPMenuItem.j

@@ -505,7 +505,7 @@ CPOffState
     if (_submenu)
     {
         [_submenu setSupermenu:_menu];
-        [_submenu setTitle:[self title]]
+        [_submenu setTitle:[self title]];
 
         [self setTarget:_menu];
         [self setAction:@selector(submenuAction:)];
@@ -826,7 +826,7 @@ CPControlKeyMask
     return [[self menu] highlightedItem] == self;
 }
 
-#pragma mark CPObject Overrides
+// MARK: CPObject Overrides
 
 /*!
     Returns a copy of the item. The copy does not belong If the item has a submenu, it is NOT copied.
@@ -843,7 +843,7 @@ CPControlKeyMask
     [item setTarget:_target];
     [item setAction:_action];
     [item setEnabled:_isEnabled];
-    [item setHidden:_isHidden]
+    [item setHidden:_isHidden];
     [item setTag:_tag];
     [item setState:_state];
     [item setImage:_image];
@@ -867,7 +867,7 @@ CPControlKeyMask
     return [self copy];
 }
 
-#pragma mark Internal
+// MARK: Internal
 
 /*
     @ignore
@@ -897,6 +897,20 @@ CPControlKeyMask
 
 @end
 
+// MARK: -
+
+@implementation CPMenuItem (CSSTheming)
+
+- (void)_setThemeIncludingDescendants:(CPTheme)aTheme
+{
+    [_view _setThemeIncludingDescendants:aTheme];
+    [_menuItemView _setThemeIncludingDescendants:aTheme];
+}
+
+@end
+
+// MARK: -
+
 var CPMenuItemIsSeparatorKey                = @"CPMenuItemIsSeparatorKey",
 
     CPMenuItemTitleKey                      = @"CPMenuItemTitleKey",
@@ -911,6 +925,9 @@ var CPMenuItemIsSeparatorKey                = @"CPMenuItemIsSeparatorKey",
 
     CPMenuItemImageKey                      = @"CPMenuItemImageKey",
     CPMenuItemAlternateImageKey             = @"CPMenuItemAlternateImageKey",
+    CPMenuItemOnStateImageKey               = @"CPMenuItemOnStateImageKey",
+    CPMenuItemOffStateImageKey              = @"CPMenuItemOffStateImageKey",
+    CPMenuItemMixedStateImageKey            = @"CPMenuItemMixedStateImageKey",
 
     CPMenuItemSubmenuKey                    = @"CPMenuItemSubmenuKey",
     CPMenuItemMenuKey                       = @"CPMenuItemMenuKey",
@@ -955,9 +972,9 @@ var CPMenuItemIsSeparatorKey                = @"CPMenuItemIsSeparatorKey",
 
         _image = [aCoder decodeObjectForKey:CPMenuItemImageKey];
         _alternateImage = [aCoder decodeObjectForKey:CPMenuItemAlternateImageKey];
-//    CPImage         _onStateImage;
-//    CPImage         _offStateImage;
-//    CPImage         _mixedStateImage;
+        _onStateImage = [aCoder decodeObjectForKey:CPMenuItemOnStateImageKey];
+        _offStateImage = [aCoder decodeObjectForKey:CPMenuItemOffStateImageKey];
+        _mixedStateImage = [aCoder decodeObjectForKey:CPMenuItemMixedStateImageKey];
 
         // This order matters because setSubmenu: needs _menu to be around.
         _menu = [aCoder decodeObjectForKey:CPMenuItemMenuKey];
@@ -1003,6 +1020,9 @@ var CPMenuItemIsSeparatorKey                = @"CPMenuItemIsSeparatorKey",
 
     ENCODE_IFNOT(CPMenuItemImageKey, _image, nil);
     ENCODE_IFNOT(CPMenuItemAlternateImageKey, _alternateImage, nil);
+    ENCODE_IFNOT(CPMenuItemOnStateImageKey, _onStateImage, nil);
+    ENCODE_IFNOT(CPMenuItemOffStateImageKey, _offStateImage, nil);
+    ENCODE_IFNOT(CPMenuItemMixedStateImageKey, _mixedStateImage, nil);
 
     ENCODE_IFNOT(CPMenuItemSubmenuKey, _submenu, nil);
     ENCODE_IFNOT(CPMenuItemMenuKey, _menu, nil);

AppKit/CPMenuItem/_CPMenuItemMenuBarView.j

@@ -25,6 +25,7 @@
 
 @class _CPMenuBarWindow
 @class _CPMenuView
+@class CPMenuItem
 
 @implementation _CPMenuItemMenuBarView : CPView
 {

AppKit/CPMenuItem/_CPMenuItemSeparatorView.j

@@ -31,7 +31,9 @@
 
 + (id)view
 {
-    return [[self alloc] initWithFrame:CGRectMake(0.0, 0.0, 0.0, 10.0)];
+    var themedHeight = [[CPTheme defaultTheme] valueForAttributeWithName:@"menu-item-separator-view-height" forClass:_CPMenuItemStandardView];
+
+    return [[self alloc] initWithFrame:CGRectMake(0.0, 0.0, 0.0, (themedHeight ? themedHeight : 10.0))];
 }
 
 - (id)initWithFrame:(CGRect)aFrame
@@ -47,12 +49,25 @@
 - (void)drawRect:(CGRect)aRect
 {
     var context = [[CPGraphicsContext currentContext] graphicsPort],
-        bounds = [self bounds];
+        bounds = [self bounds],
+        height = CGRectGetMaxY(bounds),
+        themedHeight = [[CPTheme defaultTheme] valueForAttributeWithName:@"menu-item-separator-height" forClass:_CPMenuItemStandardView],
+        lineHeight = themedHeight ? themedHeight : 1.0;
 
     CGContextBeginPath(context);
 
-    CGContextMoveToPoint(context, CGRectGetMinX(bounds), FLOOR(CGRectGetMidY(bounds)) - 0.5);
-    CGContextAddLineToPoint(context, CGRectGetMaxX(bounds), FLOOR(CGRectGetMidY(bounds)) - 0.5);
+    CGContextSetLineWidth(context, lineHeight);
+
+    if (!!((height - lineHeight) % 2))
+    {
+        CGContextMoveToPoint(context, CGRectGetMinX(bounds), FLOOR(CGRectGetMidY(bounds)) - 0.5);
+        CGContextAddLineToPoint(context, CGRectGetMaxX(bounds), FLOOR(CGRectGetMidY(bounds)) - 0.5);
+    }
+    else
+    {
+        CGContextMoveToPoint(context, CGRectGetMinX(bounds), FLOOR(CGRectGetMidY(bounds)));
+        CGContextAddLineToPoint(context, CGRectGetMaxX(bounds), FLOOR(CGRectGetMidY(bounds)));
+    }
 
     CGContextSetStrokeColor(context, [[CPTheme defaultTheme] valueForAttributeWithName:@"menu-item-separator-color" forClass:_CPMenuItemStandardView]);
     CGContextStrokePath(context);

AppKit/CPMenuItem/_CPMenuItemStandardView.j

@@ -24,6 +24,9 @@
 @import "CPImageView.j"
 @import "_CPImageAndTextView.j"
 
+@class CPMenuItem
+
+
 @implementation _CPMenuItemStandardView : CPView
 {
     CPMenuItem              _menuItem @accessors(property=menuItem);
@@ -38,6 +41,8 @@
     _CPImageAndTextView     _imageAndTextView;
     _CPImageAndTextView     _keyEquivalentView;
     CPView                  _submenuIndicatorView;
+
+    BOOL                    _hasSubmenuIndicatorImage;
 }
 
 + (CPString)defaultThemeClass
@@ -52,6 +57,7 @@
             @"menu-item-selection-color": [CPNull null],
             @"menu-item-text-shadow-color": [CPNull null],
             @"menu-item-text-color": [CPNull null],
+            @"menu-item-disabled-text-color": [CPColor lightGrayColor],
             @"menu-item-default-off-state-image": [CPNull null],
             @"menu-item-default-off-state-highlighted-image": [CPNull null],
             @"menu-item-default-on-state-image": [CPNull null],
@@ -59,12 +65,17 @@
             @"menu-item-default-mixed-state-image": [CPNull null],
             @"menu-item-default-mixed-state-highlighted-image": [CPNull null],
             @"menu-item-separator-color": [CPNull null],
+            @"menu-item-separator-height": 1.0,
+            @"menu-item-separator-view-height": 10.0,
             @"left-margin": 3.0,
             @"right-margin": 17.0,
             @"state-column-width": 14.0,
             @"indentation-width": 17.0,
             @"vertical-margin": 4.0,
+            @"vertical-offset": 0.0,
             @"right-columns-margin": 30.0,
+            @"submenu-indicator-image": [CPNull null],
+            @"submenu-indicator-highlighted-image": [CPNull null]
         };
 }
 
@@ -87,6 +98,7 @@
         _stateView = [[CPImageView alloc] initWithFrame:CGRectMake(0.0, 0.0, 0.0, 0.0)];
 
         [_stateView setImageScaling:CPImageScaleNone];
+        [_stateView setImageAlignment:CPImageAlignCenter];
 
         [self addSubview:_stateView];
 
@@ -105,9 +117,24 @@
 
         [self addSubview:_keyEquivalentView];
 
-        _submenuIndicatorView = [[_CPMenuItemSubmenuIndicatorView alloc] initWithFrame:CGRectMake(0.0, 0.0, 8.0, 10.0)];
+        // Do we have a submenu indicator image specified in the theme ?
+        _hasSubmenuIndicatorImage = !![self valueForThemeAttribute:@"submenu-indicator-image"];
+
+        if (_hasSubmenuIndicatorImage)
+        {
+            // Yes, then use an imageView
+            _submenuIndicatorView = [[CPImageView alloc] initWithFrame:CGRectMakeZero()];
+
+            [_submenuIndicatorView setImageAlignment:CPImageAlignCenter];
+        }
+        else
+        {
+            // No, then use self drawing _CPMenuItemSubmenuIndicatorView
+            _submenuIndicatorView = [[_CPMenuItemSubmenuIndicatorView alloc] initWithFrame:CGRectMake(0.0, 0.0, 8.0, 10.0)];
+
+            [_submenuIndicatorView setColor:[self valueForThemeAttribute:@"submenu-indicator-color"]];
+        }
 
-        [_submenuIndicatorView setColor:[self valueForThemeAttribute:@"submenu-indicator-color"]];
         [_submenuIndicatorView setAutoresizingMask:CPViewMinXMargin];
 
         [self addSubview:_submenuIndicatorView];
@@ -121,7 +148,7 @@
 - (CPColor)textColor
 {
     if (![_menuItem isEnabled])
-        return [CPColor lightGrayColor];
+        return [self valueForThemeAttribute:@"menu-item-disabled-text-color"];
 
     if (_highlighted)
         return [CPColor whiteColor];
@@ -145,11 +172,24 @@
     _font = aFont;
 }
 
+- (CPFont)font
+{
+    // Menu item font is forced local font or _menuItem font or system font
+    return _font || [_menuItem font] || [CPFont systemFontOfSize:CPFontCurrentSystemSize];
+}
+
+// FIXME: update is called 2 times at each display. Find why and fix.
 - (void)update
 {
     var x = [self valueForThemeAttribute:@"left-margin"] + [_menuItem indentationLevel] * [self valueForThemeAttribute:@"indentation-width"],
         height = 0.0,
-        hasStateColumn = [[_menuItem menu] showsStateColumn];
+        hasStateColumn = [[_menuItem menu] showsStateColumn],
+        myFont = [self font],
+
+        // When possible, use specific vertical margin/offset value based on font size (which could have been set by control size)
+        correspondingControlSize = [myFont controlSizeCorrespondingToFontSize],
+        verticalMargin = [self valueForThemeAttribute:@"vertical-margin" inState:CPControlSizeThemeStates[correspondingControlSize]],
+        verticalOffset = [self valueForThemeAttribute:@"vertical-offset" inState:CPControlSizeThemeStates[correspondingControlSize]];
 
     if (hasStateColumn)
     {
@@ -159,27 +199,32 @@
         switch ([_menuItem state])
         {
             case CPOnState:
-                [_stateView setImage:[self valueForThemeAttribute:@"menu-item-default-on-state-image"]];
+                [_stateView setImage:[_menuItem onStateImage] || [self valueForThemeAttribute:@"menu-item-default-on-state-image" inState:CPControlSizeThemeStates[correspondingControlSize]]];
                 break;
 
             case CPOffState:
-                [_stateView setImage:[self valueForThemeAttribute:@"menu-item-default-off-state-image"]];
+                [_stateView setImage:[_menuItem offStateImage] || [self valueForThemeAttribute:@"menu-item-default-off-state-image" inState:CPControlSizeThemeStates[correspondingControlSize]]];
                 break;
 
             case CPMixedState:
-                [_stateView setImage:[self valueForThemeAttribute:@"menu-item-default-mixed-state-image"]];
+                [_stateView setImage:[_menuItem mixedStateImage] || [self valueForThemeAttribute:@"menu-item-default-mixed-state-image" inState:CPControlSizeThemeStates[correspondingControlSize]]];
                 break;
 
             default:
                 break;
         }
 
+        var stateViewFrameOrigin = [_stateView frameOrigin];
+
+        stateViewFrameOrigin.x = x;
+        [_stateView setFrameOrigin:stateViewFrameOrigin];
+
         x += [self valueForThemeAttribute:@"state-column-width"];
     }
     else
         [_stateView setHidden:YES];
 
-    [_imageAndTextView setFont:[_menuItem font] || _font];
+    [_imageAndTextView setFont:myFont];
     [_imageAndTextView setVerticalAlignment:CPCenterVerticalTextAlignment];
     [_imageAndTextView setImage:[_menuItem image]];
     [_imageAndTextView setText:[_menuItem title]];
@@ -192,7 +237,7 @@
 
     imageAndTextViewFrame.origin.x = x;
     x += CGRectGetWidth(imageAndTextViewFrame);
-    height = MAX(height, CGRectGetHeight(imageAndTextViewFrame));
+    height = MAX(height, CGRectGetHeight(imageAndTextViewFrame)); // FIXME: here, height = 0 -> MAX useless
 
     var hasKeyEquivalent = !![_menuItem keyEquivalent],
         hasSubmenu = [_menuItem hasSubmenu];
@@ -202,14 +247,14 @@
 
     if (hasKeyEquivalent)
     {
-        [_keyEquivalentView setFont:[_menuItem font] || _font];
+        [_keyEquivalentView setFont:myFont];
         [_keyEquivalentView setVerticalAlignment:CPCenterVerticalTextAlignment];
         [_keyEquivalentView setImage:[_menuItem image]];
         [_keyEquivalentView setText:[_menuItem keyEquivalentStringRepresentation]];
         [_keyEquivalentView setTextColor:[self textColor]];
         [_keyEquivalentView setTextShadowColor:[self textShadowColor]];
         [_keyEquivalentView setTextShadowOffset:CGSizeMake(0, 1)];
-        [_keyEquivalentView setFrameOrigin:CGPointMake(x, [self valueForThemeAttribute:@"vertical-margin"])];
+        [_keyEquivalentView setFrameOrigin:CGPointMake(x, verticalMargin)];
         [_keyEquivalentView sizeToFit];
 
         var keyEquivalentViewFrame = [_keyEquivalentView frame];
@@ -226,6 +271,14 @@
 
     if (hasSubmenu)
     {
+        if (_hasSubmenuIndicatorImage)
+        {
+            var submenuIndicatorImage = [self valueForThemeAttribute:@"submenu-indicator-image" inState:CPControlSizeThemeStates[correspondingControlSize]];
+
+            [_submenuIndicatorView setImage:submenuIndicatorImage];
+            [_submenuIndicatorView setFrameSize:[submenuIndicatorImage size]];
+        }
+
         [_submenuIndicatorView setHidden:NO];
 
         var submenuViewFrame = [_submenuIndicatorView frame];
@@ -238,9 +291,9 @@
     else
         [_submenuIndicatorView setHidden:YES];
 
-    height += 2.0 * [self valueForThemeAttribute:@"vertical-margin"];
+    height += 2.0 * verticalMargin;
 
-    imageAndTextViewFrame.origin.y = FLOOR((height - CGRectGetHeight(imageAndTextViewFrame)) / 2.0);
+    imageAndTextViewFrame.origin.y = FLOOR((height - CGRectGetHeight(imageAndTextViewFrame)) / 2.0) + verticalOffset;
     [_imageAndTextView setFrame:imageAndTextViewFrame];
 
     if (hasStateColumn)
@@ -248,7 +301,7 @@
 
     if (hasKeyEquivalent)
     {
-        keyEquivalentViewFrame.origin.y = FLOOR((height - CGRectGetHeight(keyEquivalentViewFrame)) / 2.0);
+        keyEquivalentViewFrame.origin.y = FLOOR((height - CGRectGetHeight(keyEquivalentViewFrame)) / 2.0) + verticalOffset;
         [_keyEquivalentView setFrame:keyEquivalentViewFrame];
     }
 
@@ -273,6 +326,8 @@
 
     _highlighted = shouldHighlight;
 
+    var correspondingControlSize = [[self font] controlSizeCorrespondingToFontSize];
+
     [_imageAndTextView setTextColor:[self textColor]];
     [_keyEquivalentView setTextColor:[self textColor]];
     [_imageAndTextView setTextShadowColor:[self textShadowColor]];
@@ -282,13 +337,21 @@
     {
         [self setBackgroundColor:[self valueForThemeAttribute:@"menu-item-selection-color"]];
         [_imageAndTextView setImage:[_menuItem alternateImage] || [_menuItem image]];
-        [_submenuIndicatorView setColor:[self textColor]];
+
+        if (_hasSubmenuIndicatorImage)
+            [_submenuIndicatorView setImage:[self valueForThemeAttribute:@"submenu-indicator-highlighted-image" inState:CPControlSizeThemeStates[correspondingControlSize]]];
+        else
+            [_submenuIndicatorView setColor:[self textColor]];
     }
     else
     {
         [self setBackgroundColor:nil];
         [_imageAndTextView setImage:[_menuItem image]];
-        [_submenuIndicatorView setColor:[self valueForThemeAttribute:@"submenu-indicator-color"]];
+
+        if (_hasSubmenuIndicatorImage)
+            [_submenuIndicatorView setImage:[self valueForThemeAttribute:@"submenu-indicator-image" inState:CPControlSizeThemeStates[correspondingControlSize]]];
+        else
+            [_submenuIndicatorView setColor:[self valueForThemeAttribute:@"submenu-indicator-color"]];
     }
 
     if ([[_menuItem menu] showsStateColumn])
@@ -298,15 +361,15 @@
             switch ([_menuItem state])
             {
                 case CPOnState:
-                    [_stateView setImage:[self valueForThemeAttribute:@"menu-item-default-on-state-highlighted-image"]];
+                    [_stateView setImage:[_menuItem onStateImage] || [self valueForThemeAttribute:@"menu-item-default-on-state-highlighted-image" inState:CPControlSizeThemeStates[correspondingControlSize]]];
                     break;
 
                 case CPOffState:
-                    [_stateView setImage:[self valueForThemeAttribute:@"menu-item-default-off-state-highlighted-image"]];
+                    [_stateView setImage:[_menuItem offStateImage] || [self valueForThemeAttribute:@"menu-item-default-off-state-highlighted-image" inState:CPControlSizeThemeStates[correspondingControlSize]]];
                     break;
 
                 case CPMixedState:
-                    [_stateView setImage:[self valueForThemeAttribute:@"menu-item-default-mixed-state-highlighted-image"]];
+                    [_stateView setImage:[_menuItem mixedImage] || [self valueForThemeAttribute:@"menu-item-default-mixed-state-highlighted-image" inState:CPControlSizeThemeStates[correspondingControlSize]]];
                     break;
 
                 default:
@@ -318,15 +381,15 @@
             switch ([_menuItem state])
             {
                 case CPOnState:
-                    [_stateView setImage:[self valueForThemeAttribute:@"menu-item-default-on-state-image"]];
+                    [_stateView setImage:[_menuItem onStateImage] || [self valueForThemeAttribute:@"menu-item-default-on-state-image" inState:CPControlSizeThemeStates[correspondingControlSize]]];
                     break;
 
                 case CPOffState:
-                    [_stateView setImage:[self valueForThemeAttribute:@"menu-item-default-off-state-image"]];
+                    [_stateView setImage:[_menuItem offStateImage] || [self valueForThemeAttribute:@"menu-item-default-off-state-image" inState:CPControlSizeThemeStates[correspondingControlSize]]];
                     break;
 
                 case CPMixedState:
-                    [_stateView setImage:[self valueForThemeAttribute:@"menu-item-default-mixed-state-image"]];
+                    [_stateView setImage:[_menuItem mixedImage] || [self valueForThemeAttribute:@"menu-item-default-mixed-state-image" inState:CPControlSizeThemeStates[correspondingControlSize]]];
                     break;
 
                 default:
@@ -343,6 +406,22 @@
 
 @end
 
+// MARK: -
+
+@implementation _CPMenuItemStandardView (CSSTheming)
+
+// MARK: Override
+
+- (void)_setThemeIncludingDescendants:(CPTheme)aTheme
+{
+    [self setTheme:aTheme];
+    [[self subviews] makeObjectsPerformSelector:@selector(_setThemeIncludingDescendants:) withObject:aTheme];
+}
+
+@end
+
+// MARK: -
+
 @implementation _CPMenuItemSubmenuIndicatorView : CPView
 {
     CPColor _color;

AppKit/CPMenuItem/_CPMenuItemView.j

@@ -26,6 +26,7 @@
 @import "_CPMenuItemStandardView.j"
 @import "_CPMenuItemMenuBarView.j"
 
+@class CPMenuItem
 @global CPApp
 
 /*
@@ -251,6 +252,31 @@
 
 @end
 
+// MARK: -
+
+@implementation _CPMenuItemView (CSSTheming)
+
+// MARK: Override
+
+- (void)_setThemeIncludingDescendants:(CPTheme)aTheme
+{
+    [self setTheme:aTheme];
+    [_view _setThemeIncludingDescendants:aTheme];
+
+    // Items must also perform this (without this, only the selected item does)
+
+    [_imageAndTextView _setThemeIncludingDescendants:aTheme];
+    [_submenuView _setThemeIncludingDescendants:aTheme];
+    [[_menuItem view] _setThemeIncludingDescendants:aTheme];
+
+    if ([_view respondsToSelector:@selector(update)])
+        [_view update];
+}
+
+@end
+
+// MARK: -
+
 @implementation _CPMenuItemArrowView : CPView
 {
     CPColor _color;

AppKit/CPObjectController.j

@@ -27,6 +27,9 @@
 @import "CPController.j"
 @import "CPKeyValueBinding.j"
 
+@class _CPManagedProxy
+@class CPPredicate;
+
 /*!
     @class
 
@@ -47,6 +50,9 @@
 
     BOOL            _isEditable;
     BOOL            _automaticallyPreparesContent;
+    BOOL            _usesLazyFetching @accessors(getter=usesLazyFetching, setter=setUsesLazyFetching:);
+    BOOL            _isUsingManagedProxy;
+    _CPManagedProxy _managedProxy;
 
     CPCountedSet    _observedKeys;
 }
@@ -179,6 +185,52 @@
     return _automaticallyPreparesContent;
 }
 
+/*!
+    Sets the entity name the controller handles.
+
+    @param CPString newEntityName - The new entity name.
+*/
+- (void)setEntityName:(CPString)newEntityName
+{
+    if (!_managedProxy)
+    {
+        _managedProxy = [[_CPManagedProxy alloc] init];
+        _isUsingManagedProxy = YES;
+    }
+
+    [_managedProxy setEntityName:newEntityName];
+}
+
+/*!
+    Returns the entity name.
+
+    @return CPString - The name of the entity.
+*/
+- (CPString)entityName
+{
+    return [_managedProxy entityName];
+}
+
+/*!
+    Sets the predicate used to fetch content.
+
+    @param CPPredicate newPredicate - The fetch predicate.
+*/
+- (void)setFetchPredicate:(CPPredicate)newPredicate
+{
+    [_managedProxy setFetchPredicate:newPredicate];
+}
+
+/*!
+    Returns the fetch predicate.
+
+    @return CPPredicate - The predicate used to fetch content.
+*/
+- (CPPredicate)fetchPredicate
+{
+    return [_managedProxy fetchPredicate];
+}
+
 /*!
     Overridden by a subclass that require control over the creation of new objects.
 */
@@ -189,6 +241,7 @@
 
 /*!
     Sets the object class when creating new objects.
+
     @param Class - the class of new objects that will be created.
 */
 - (void)setObjectClass:(Class)aClass
@@ -331,13 +384,35 @@
 */
 - (void)_selectionDidChange
 {
-    if (_selection === undefined || _selection === nil)
+    if (_selection == nil)
         _selection = [[CPControllerSelectionProxy alloc] initWithController:self];
 
     [_selection controllerDidChange];
     [self didChangeValueForKey:@"selection"];
 }
 
+/*!
+    @ignore
+    These two private methods map CPTextField notifications to the CPEditorRegistration protocol
+    This should be generalized in the future:
+
+    The CPEditorRegistrationProtocol can be implemented in all controls that support editing, not just CPTextField.
+    In CPArrayController there are other cases than selection change when we need to review all editor pending changes. They should be covered, including the selection change, by the wider concept described by the methods commitEditing: (forces to end editing) and discardEditing: (pending changes are lost).
+*/
+- (void)_objectDidBeginEditing:(CPNotification)notification
+{
+    [self objectDidBeginEditing:[notification object]];
+}
+
+/*!
+    @ignore
+*/
+- (void) _objectDidEndEditing:(CPNotification)notification
+{
+    [self objectDidEndEditing:[notification object]];
+}
+
+
 /*!
     @return id - Returns the keys which are being observed.
 */
@@ -363,7 +438,10 @@
 var CPObjectControllerContentKey                        = @"CPObjectControllerContentKey",
     CPObjectControllerObjectClassNameKey                = @"CPObjectControllerObjectClassNameKey",
     CPObjectControllerIsEditableKey                     = @"CPObjectControllerIsEditableKey",
-    CPObjectControllerAutomaticallyPreparesContentKey   = @"CPObjectControllerAutomaticallyPreparesContentKey";
+    CPObjectControllerAutomaticallyPreparesContentKey   = @"CPObjectControllerAutomaticallyPreparesContentKey",
+    CPObjectControllerUsesLazyFetchingKey               = @"CPObjectControllerUsesLazyFetchingKey",
+    CPObjectControllerIsUsingManagedProxyKey            = @"CPObjectControllerIsUsingManagedProxyKey",
+    CPObjectControllerManagedProxyKey                   = @"CPObjectControllerManagedProxyKey";
 
 @implementation CPObjectController (CPCoding)
 
@@ -374,12 +452,18 @@ var CPObjectControllerContentKey                        = @"CPObjectControllerCo
     if (self)
     {
         var objectClassName = [aCoder decodeObjectForKey:CPObjectControllerObjectClassNameKey],
-            objectClass = CPClassFromString(objectClassName);
+            objectClass = CPClassFromString(objectClassName),
+            content = [aCoder decodeObjectForKey:CPObjectControllerContentKey];
 
         [self setObjectClass:objectClass || [CPMutableDictionary class]];
         [self setEditable:[aCoder decodeBoolForKey:CPObjectControllerIsEditableKey]];
         [self setAutomaticallyPreparesContent:[aCoder decodeBoolForKey:CPObjectControllerAutomaticallyPreparesContentKey]];
-        [self setContent:[aCoder decodeObjectForKey:CPObjectControllerContentKey]];
+        [self setUsesLazyFetching:[aCoder decodeBoolForKey:CPObjectControllerUsesLazyFetchingKey]];
+        _isUsingManagedProxy = [aCoder decodeBoolForKey:CPObjectControllerIsUsingManagedProxyKey];
+        _managedProxy = [aCoder decodeObjectForKey:CPObjectControllerManagedProxyKey];
+
+        if (content != nil)
+            [self setContent:content];
 
         _observedKeys = [[CPCountedSet alloc] init];
     }
@@ -398,6 +482,11 @@ var CPObjectControllerContentKey                        = @"CPObjectControllerCo
 
     [aCoder encodeBool:[self isEditable] forKey:CPObjectControllerIsEditableKey];
     [aCoder encodeBool:[self automaticallyPreparesContent] forKey:CPObjectControllerAutomaticallyPreparesContentKey];
+    [aCoder encodeBool:[self usesLazyFetching] forKey:CPObjectControllerUsesLazyFetchingKey];
+    [aCoder encodeBool:_isUsingManagedProxy forKey:CPObjectControllerIsUsingManagedProxyKey];
+
+    if (_managedProxy)
+        [aCoder encodeObject:_managedProxy forKey:CPObjectControllerManagedProxyKey];
 }
 
 - (void)awakeFromCib
@@ -459,13 +548,13 @@ var CPObjectControllerContentKey                        = @"CPObjectControllerCo
 
 - (BOOL)isEqual:(id)anObject
 {
-    if ([anObject class] === [self class])
-    {
-        if (anObject._observer === _observer && [anObject._keyPath isEqual:_keyPath] && [anObject._object isEqual:_object])
-            return YES;
-    }
+    if (self === anObject)
+        return YES;
 
-    return NO;
+    if (!anObject || [anObject class] !== [self class] || anObject._observer !== _observer || anObject._keyPath !== _keyPath || anObject._object !== _object)
+            return NO;
+
+    return YES;
 }
 
 - (void)observeValueForKeyPath:(CPString)aKeyPath ofObject:(id)anObject change:(CPDictionary)change context:(id)context
@@ -703,7 +792,7 @@ var CPObjectControllerContentKey                        = @"CPObjectControllerCo
         }
     }
 
-    if (value === nil || value.isa && [value isEqual:[CPNull null]])
+    if (value == nil || value.isa && [value isEqual:[CPNull null]])
         value = CPNullMarker;
 
     return value;
@@ -719,7 +808,8 @@ var CPObjectControllerContentKey                        = @"CPObjectControllerCo
         var value = [self _controllerMarkerForValues:values];
         [_cachedValues setObject:value forKey:theKeyPath];
 
-        return value;
+        // Apple's implementation returns nil instead of CPNullMarker
+        return value === CPNullMarker ? nil : value;
     }
     else
         return values;
@@ -749,7 +839,7 @@ var CPObjectControllerContentKey                        = @"CPObjectControllerCo
 
 - (void)setValue:(id)theValue forKey:(CPString)theKeyPath
 {
-    [self setValue:theKeyPath forKeyPath:theKeyPath];
+    [self setValue:theValue forKeyPath:theKeyPath];
 }
 
 - (unsigned)count
@@ -808,15 +898,55 @@ var CPObjectControllerContentKey                        = @"CPObjectControllerCo
 
 - (void)removeObserver:(id)anObject forKeyPath:(CPString)aKeyPath
 {
-    var proxy = [[_CPObservationProxy alloc] initWithKeyPath:aKeyPath observer:anObject object:self],
-        index = [_observationProxies indexOfObject:proxy];
+    [_observationProxies enumerateObjectsUsingBlock:function(aProxy, idx, stop)
+    {
+        if (aProxy._object === self && aProxy._keyPath == aKeyPath && aProxy._observer === anObject)
+        {
+            var observedObjects = _observedObjectsByKeyPath[aKeyPath];
 
-    var observedObjects = _observedObjectsByKeyPath[aKeyPath];
-    [observedObjects removeObserver:[_observationProxies objectAtIndex:index] forKeyPath:aKeyPath];
+            [observedObjects removeObserver:aProxy forKeyPath:aKeyPath];
+            [_observationProxies removeObjectAtIndex:idx];
 
-    [_observationProxies removeObjectAtIndex:index];
+            _observedObjectsByKeyPath[aKeyPath] = nil;
 
-    _observedObjectsByKeyPath[aKeyPath] = nil;
+            stop(YES);
+        }
+    }];
+}
+
+@end
+
+
+@implementation _CPManagedProxy : CPObject
+{
+    CPString    _entityName @accessors(getter=entityName, setter=setEntityName:);
+    CPPredicate _fetchPredicate @accessors(getter=fetchPredicate, setter=setFetchPredicate:);
+}
+
+@end
+
+var CPManagedProxyEntityNameKey                         = @"CPManagedProxyEntityNameKey",
+    CPManagedProxyFetchPredicateKey                     = @"CPManagedProxyFetchPredicateKey";
+
+@implementation _CPManagedProxy (CPCoding)
+
+- (id)initWithCoder:(CPCoder)aCoder
+{
+    self = [super init];
+
+    if (self)
+    {
+        [self setEntityName:[aCoder decodeObjectForKey:CPManagedProxyEntityNameKey]];
+        [self setFetchPredicate:[aCoder decodeObjectForKey:CPManagedProxyFetchPredicateKey]];
+    }
+
+    return self;
+}
+
+- (void)encodeWithCoder:(CPCoder)aCoder
+{
+    [aCoder encodeObject:[self entityName] forKey:CPManagedProxyEntityNameKey];
+    [aCoder encodeObject:[self fetchPredicate] forKey:CPManagedProxyFetchPredicateKey];
 }
 
 @end

AppKit/CPPanel.j

@@ -22,10 +22,13 @@
 
 @import "CPWindow.j"
 
+@global CPApp
 
 CPOKButton      = 1;
 CPCancelButton  = 0;
 
+CPDocModalWindowMask    = 1 << 6;
+
 /*!
     @ingroup appkit
     @class CPPanel
@@ -51,8 +54,6 @@ CPCancelButton  = 0;
     @global
     @class CPWindow
 */
-CPDocModalWindowMask    = 1 << 6;
-
 @implementation CPPanel : CPWindow
 {
     BOOL    _becomesKeyOnlyIfNeeded;
@@ -119,4 +120,24 @@ CPDocModalWindowMask    = 1 << 6;
     return YES;
 }
 
+
+// MARK: -
+// MARK: Overrides
+
+/*!
+    @ignore
+*/
+- (void)cancelOperation:(id)sender
+{
+    if ([[CPApp currentEvent] _couldBeKeyEquivalent] && [self performKeyEquivalent:[CPApp currentEvent]])
+        return;
+
+    [[self firstResponder] tryToPerform:@selector(cancel:) with:self];
+}
+
+- (void)cancel:(id)sender
+{
+    [self performClose:sender];
+}
+
 @end

AppKit/CPPasteboard.j

@@ -26,6 +26,9 @@
 @import <Foundation/CPDictionary.j>
 @import <Foundation/CPPropertyListSerialization.j>
 
+@class CPWebScriptObject
+
+@typedef DataTransfer
 
 CPGeneralPboard         = @"CPGeneralPboard";
 CPFontPboard            = @"CPFontPboard";
@@ -41,6 +44,9 @@ CPStringPboardType      = @"CPStringPboardType";
 CPURLPboardType         = @"CPURLPboardType";
 CPImagesPboardType      = @"CPImagesPboardType";
 CPVideosPboardType      = @"CPVideosPboardType";
+CPRTFPboardType         = @"CPRTFPboardType";
+_CPSmartPboardType      = @"_CPSmartPboardType";
+_CPASPboardType         = @"_CPASPboardType";
 
 UTF8PboardType          = @"public.utf8-plain-text";
 
@@ -48,8 +54,7 @@ UTF8PboardType          = @"public.utf8-plain-text";
 CPImagePboardType       = @"CPImagePboardType";
 
 
-var CPPasteboards = nil,
-    supportsNativePasteboard = NO;
+var CPPasteboards = nil;
 
 /*!
     @ingroup appkit
@@ -65,8 +70,6 @@ var CPPasteboards = nil,
 
     unsigned        _changeCount;
     CPString        _stateUID;
-
-    WebScriptObject _nativePasteboard;
 }
 
 /*
@@ -80,9 +83,6 @@ var CPPasteboards = nil,
     [self setVersion:1.0];
 
     CPPasteboards = @{};
-
-    if (typeof window.cpPasteboardWithName !== "undefined")
-        supportsNativePasteboard = YES;
 }
 
 /*!
@@ -125,12 +125,6 @@ var CPPasteboards = nil,
         _provided = @{};
 
         _changeCount = 0;
-
-        if (supportsNativePasteboard)
-        {
-            _nativePasteboard = window.cpPasteboardWithName(aName);
-            [self _synchronizePasteboard];
-        }
     }
 
     return self;
@@ -160,15 +154,6 @@ var CPPasteboards = nil,
         [_owners setObject:anOwner forKey:type];
     }
 
-    if (_nativePasteboard)
-    {
-        var nativeTypes = [types copy];
-        if ([types containsObject:CPStringPboardType])
-            nativeTypes.push(UTF8PboardType);
-
-        _nativePasteboard.addTypes_(nativeTypes);
-    }
-
     return ++_changeCount;
 }
 
@@ -179,12 +164,6 @@ var CPPasteboards = nil,
     @return the pasteboard's change count
 */
 - (unsigned)declareTypes:(CPArray)types owner:(id)anOwner
-{
-    [self _declareTypes:types owner:anOwner updateNativePasteboard:YES];
-}
-
-/*! @ignore */
-- (unsigned)_declareTypes:(CPArray)types owner:(id)anOwner updateNativePasteboard:(BOOL)shouldUpdate
 {
     [_types setArray:types];
 
@@ -198,16 +177,6 @@ var CPPasteboards = nil,
             [_owners setObject:anOwner forKey:_types[count]];
     }
 
-    if (_nativePasteboard && shouldUpdate)
-    {
-        var nativeTypes = [types copy];
-        if ([types containsObject:CPStringPboardType])
-            nativeTypes.push(UTF8PboardType);
-
-        _nativePasteboard.declareTypes_(nativeTypes);
-        _changeCount = _nativePasteboard.changeCount();
-    }
-
     return ++_changeCount;
 }
 
@@ -270,7 +239,6 @@ var CPPasteboards = nil,
 */
 - (CPArray)types
 {
-    [self _synchronizePasteboard];
     return _types;
 }
 
@@ -309,36 +277,6 @@ var CPPasteboards = nil,
     return nil;
 }
 
-- (void)_synchronizePasteboard
-{
-    if (_nativePasteboard && _nativePasteboard.changeCount() > _changeCount)
-    {
-        var nativeTypes = [_nativePasteboard.types() copy];
-        if ([nativeTypes containsObject:UTF8PboardType])
-            nativeTypes.push(CPStringPboardType);
-
-        [self _declareTypes:nativeTypes owner:self updateNativePasteboard:NO];
-
-        _changeCount = _nativePasteboard.changeCount();
-    }
-}
-
-/*! @ignore
-    method provided for integration with native pasteboard
-*/
-- (void)pasteboard:(CPPasteboard)aPasteboard provideDataForType:(CPString)aType
-{
-    if (aType === CPStringPboardType)
-    {
-        var string = _nativePasteboard.stringForType_(UTF8PboardType);
-
-        [self setString:string forType:CPStringPboardType];
-        [self setString:string forType:UTF8PboardType];
-    }
-    else
-        [self setString:_nativePasteboard.stringForType_(aType) forType:aType];
-}
-
 /*!
     Returns the property list for the specified data type
     @param aType the requested data type

AppKit/CPPopUpButton.j

@@ -26,8 +26,6 @@
 @import "CPMenu.j"
 @import "CPMenuItem.j"
 
-var VISIBLE_MARGIN = 7.0;
-
 CPPopUpButtonStatePullsDown = CPThemeState("pulls-down");
 
 /*!
@@ -47,6 +45,13 @@ CPPopUpButtonStatePullsDown = CPThemeState("pulls-down");
     return "popup-button";
 }
 
++ (CPDictionary)themeAttributes
+{
+    return @{
+             @"menu-offset": CGSizeMake(0, 0)
+             };
+}
+
 + (CPSet)keyPathsForValuesAffectingSelectedIndex
 {
     return [CPSet setWithObject:@"objectValue"];
@@ -363,15 +368,10 @@ CPPopUpButtonStatePullsDown = CPThemeState("pulls-down");
 */
 - (CPArray)itemTitles
 {
-    var titles = [],
-        items = [self itemArray],
-        index = 0,
-        count = [items count];
-
-    for (; index < count; ++index)
-        titles.push([items[index] title]);
-
-    return titles;
+    return [[self itemArray] arrayByApplyingBlock:function(item)
+    {
+        return [item title];
+    }];
 }
 
 /*!
@@ -498,9 +498,17 @@ CPPopUpButtonStatePullsDown = CPThemeState("pulls-down");
 
         if (index < 0)
         {
-            [self addItemWithTitle:aTitle];
 
-            index = [self numberOfItems] - 1;
+            // this ist to match cocoa where setting an empty string does not add it but simply clears the title
+            // and sets objectValue to -1
+            if (aTitle === '')
+                [self selectItemAtIndex:-1];
+            else
+            {
+                [self addItemWithTitle:aTitle];
+
+                index = [self numberOfItems] - 1;
+            }
         }
 
         [self selectItemAtIndex:index];
@@ -684,14 +692,16 @@ CPPopUpButtonStatePullsDown = CPThemeState("pulls-down");
     if ([self pullsDown])
     {
         var positionedItem = nil,
-            location = CGPointMake(0.0, CGRectGetMaxY(bounds) - 1);
+            menuOffset     = [self currentValueForThemeAttribute:@"menu-offset"],
+            location       = CGPointMake(menuOffset.width, CGRectGetMaxY(bounds) + menuOffset.height);
     }
     else
     {
         var contentRect = [self contentRectForBounds:bounds],
             positionedItem = [self selectedItem],
             standardLeftMargin = [_CPMenuWindow _standardLeftMargin] + [_CPMenuItemStandardView _standardLeftMargin],
-            location = CGPointMake(CGRectGetMinX(contentRect) - standardLeftMargin, 0.0);
+            menuOffset = [self currentValueForThemeAttribute:@"menu-offset"],
+            location = CGPointMake(CGRectGetMinX(contentRect) - standardLeftMargin + menuOffset.width, menuOffset.height);
 
         minimumWidth += standardLeftMargin;
 
@@ -773,13 +783,6 @@ CPPopUpButtonStatePullsDown = CPThemeState("pulls-down");
             [[self selectedItem] setState:CPOffState];
 }
 
-- (void)_reverseSetBinding
-{
-    [_CPPopUpButtonSelectionBinder reverseSetValueForObject:self];
-
-    [super _reverseSetBinding];
-}
-
 @end
 
 @implementation CPPopUpButton (BindingSupport)
@@ -802,6 +805,20 @@ CPPopUpButtonStatePullsDown = CPThemeState("pulls-down");
     return [super _binderClassForBinding:aBinding];
 }
 
++ (BOOL)isBindingExclusive:(CPString)aBinding
+{
+    return (aBinding == CPSelectedIndexBinding ||
+           aBinding == CPSelectedTagBinding ||
+           aBinding == CPSelectedValueBinding);
+}
+
+- (void)_reverseSetBinding
+{
+    [_CPPopUpButtonSelectionBinder _reverseSetValueFromExclusiveBinderForObject:self];
+
+    [super _reverseSetBinding];
+}
+
 @end
 
 @implementation _CPPopUpButtonContentBinder : CPBinder
@@ -847,7 +864,17 @@ CPPopUpButtonStatePullsDown = CPThemeState("pulls-down");
 {
     var count = [aValue count],
         options = [_info objectForKey:CPOptionsKey],
-        offset = [self _getInsertNullOffset];
+        offset = [self _getInsertNullOffset],
+        selectedBindingInfo = [_source infoForBinding:CPSelectedObjectBinding],
+        selectedObject = nil;
+
+    if (selectedBindingInfo)
+    {
+        var destination = [selectedBindingInfo objectForKey:CPObservedObjectKey],
+            keyPath = [selectedBindingInfo objectForKey:CPObservedKeyPathKey];
+
+        selectedObject = [destination valueForKeyPath:keyPath];
+    }
 
     if (count + offset != [_source numberOfItems])
     {
@@ -858,9 +885,19 @@ CPPopUpButtonStatePullsDown = CPThemeState("pulls-down");
 
         for (var i = 0; i < count; i++)
         {
-            var item = [[CPMenuItem alloc] initWithTitle:@"" action:NULL keyEquivalent:nil];
-            [self _setValue:[aValue objectAtIndex:i] forItem:item withOptions:options];
+            var item = [[CPMenuItem alloc] initWithTitle:@"" action:NULL keyEquivalent:nil],
+                itemValue = [aValue objectAtIndex:i];
+
+            [self _setValue:itemValue forItem:item withOptions:options];
             [_source addItem:item];
+
+            // Select this item if it is the one selected by the selected object binding
+            // This is needed if the selected object binding is set before the items
+            // from the content binding
+            if (itemValue === selectedObject)
+            {
+                [_source setSelectedIndex:[_source numberOfItems] - 1];
+            }
         }
     }
     else
@@ -931,30 +968,8 @@ CPPopUpButtonStatePullsDown = CPThemeState("pulls-down");
 
 @end
 
-var binderForObject = {};
-
 @implementation _CPPopUpButtonSelectionBinder : CPBinder
 {
-    CPString _selectionBinding @accessors;
-}
-
-- (id)initWithBinding:(CPString)aBinding name:(CPString)aName to:(id)aDestination keyPath:(CPString)aKeyPath options:(CPDictionary)options from:(id)aSource
-{
-    self = [super initWithBinding:aBinding name:aName to:aDestination keyPath:aKeyPath options:options from:aSource];
-
-    if (self)
-    {
-        binderForObject[[aSource UID]] = self;
-        _selectionBinding = aName;
-    }
-
-    return self;
-}
-
-+ (void)reverseSetValueForObject:(id)aSource
-{
-    var binder = binderForObject[[aSource UID]];
-    [binder reverseSetValueFor:[binder _selectionBinding]];
 }
 
 - (void)setPlaceholderValue:(id)aValue withMarker:(CPString)aMarker forBinding:(CPString)aBinding

AppKit/CPPopover.j

@@ -28,8 +28,19 @@
 @import "CPImageView.j"
 @import "CPResponder.j"
 @import "CPView.j"
+@import "CPViewController.j"
 @import "_CPPopoverWindow.j"
 
+@protocol CPPopoverDelegate <CPObject>
+
+@optional
+- (BOOL)popoverShouldClose:(CPPopover)aPopover;
+- (void)popoverWillClose:(CPPopover)aPopover;
+- (void)popoverDidClose:(CPPopover)aPopover;
+- (void)popoverWillShow:(CPPopover)aPopover;
+- (void)popoverDidShow:(CPPopover)aPopover;
+
+@end
 
 CPPopoverBehaviorApplicationDefined = 0;
 CPPopoverBehaviorTransient          = 1;
@@ -60,20 +71,21 @@ var CPPopoverDelegate_popover_willShow_     = 1 << 0,
 */
 @implementation CPPopover : CPResponder
 {
-    @outlet CPViewController    _contentViewController  @accessors(property=contentViewController);
-    @outlet id                  _delegate               @accessors(getter=delegate);
+    @outlet CPViewController        _contentViewController  @accessors(property=contentViewController);
+    @outlet id <CPPopoverDelegate>  _delegate               @accessors(getter=delegate);
 
-    BOOL                        _animates               @accessors(getter=animates);
-    int                         _appearance             @accessors(property=appearance);
-    int                         _behavior               @accessors(getter=behavior);
+    BOOL                            _animates               @accessors(getter=animates);
+    int                             _appearance             @accessors(property=appearance);
+    int                             _behavior               @accessors(getter=behavior);
 
-    _CPPopoverWindow            _popoverWindow;
-    int                         _implementedDelegateMethods;
+    _CPPopoverWindow                _popoverWindow;
+    CPView                          _positioningView;
+    int                             _implementedDelegateMethods;
 }
 
 
-#pragma mark -
-#pragma mark Initialization
+// MARK: -
+// MARK: Initialization
 
 /*!
     Initialize the CPPopover witn default values
@@ -93,8 +105,8 @@ var CPPopoverDelegate_popover_willShow_     = 1 << 0,
 }
 
 
-#pragma mark -
-#pragma mark Getters / Setters
+// MARK: -
+// MARK: Getters / Setters
 
 /*!
     Returns the current rect of the popover
@@ -127,9 +139,6 @@ var CPPopoverDelegate_popover_willShow_     = 1 << 0,
 */
 - (CGSize)contentSize
 {
-    if (![_popoverWindow isVisible])
-        return CGRectMakeZero();
-
     return [[_contentViewController view] frameSize];
 }
 
@@ -140,7 +149,10 @@ var CPPopoverDelegate_popover_willShow_     = 1 << 0,
 */
 - (void)setContentSize:(CGSize)aSize
 {
-    [[_contentViewController view] setFrameSize:aSize];
+    if (!_popoverWindow)
+        [[_contentViewController view] setFrameSize:aSize];
+    else
+        [_popoverWindow updateFrameWithSize:aSize];
 }
 
 /*!
@@ -181,10 +193,10 @@ Set the behavior of the CPPopover. It can be:
         return;
 
     _behavior = aBehavior;
-    [_popoverWindow setStyleMask:[self styleMaskForBehavior]];
+    [_popoverWindow setStyleMask:[self _styleMaskForBehavior]];
 }
 
-- (void)setDelegate:(id)aDelegate
+- (void)setDelegate:(id <CPPopoverDelegate>)aDelegate
 {
     if (_delegate === aDelegate)
         return;
@@ -208,8 +220,8 @@ Set the behavior of the CPPopover. It can be:
         _implementedDelegateMethods |= CPPopoverDelegate_popover_didClose_;
 }
 
-#pragma mark -
-#pragma mark Positioning
+// MARK: -
+// MARK: Positioning
 
 /*!
     Show the popover
@@ -226,17 +238,14 @@ Set the behavior of the CPPopover. It can be:
     if (!_contentViewController)
         [CPException raise:CPInternalInconsistencyException reason:@"contentViewController must not be nil"];
 
-    // If the popover is currently closing, do nothing. That is what Cocoa does.
-    if ([_popoverWindow isClosing])
+    // If the popover is currently closing or opening, do nothing. That is what Cocoa does.
+    if ([_popoverWindow isClosing] || [_popoverWindow isOpening])
         return;
 
-    if (_implementedDelegateMethods & CPPopoverDelegate_popover_willShow_)
-        [_delegate popoverWillShow:self];
+    _positioningView = positioningView;
 
     if (!_popoverWindow)
-    {
-        _popoverWindow = [[_CPPopoverWindow alloc] initWithContentRect:CGRectMakeZero() styleMask:[self styleMaskForBehavior]];
-    }
+        _popoverWindow = [[_CPPopoverWindow alloc] initWithContentRect:CGRectMakeZero() styleMask:[self _styleMaskForBehavior]];
 
     [_popoverWindow setPlatformWindow:[[positioningView window] platformWindow]];
     [_popoverWindow setAppearance:_appearance];
@@ -245,15 +254,22 @@ Set the behavior of the CPPopover. It can be:
     [_popoverWindow setMovableByWindowBackground:NO];
     [_popoverWindow setFrame:[_popoverWindow frameRectForContentRect:[[_contentViewController view] frame]]];
     [_popoverWindow setContentView:[_contentViewController view]];
+
+    if (![self isShown])
+        [self _popoverWillShow];
+
     [_popoverWindow positionRelativeToRect:positioningRect ofView:positioningView preferredEdge:preferredEdge];
 
-    if (!_animates && _implementedDelegateMethods & CPPopoverDelegate_popover_didShow_)
-        [_delegate popoverDidShow:self];
+    if (![self isShown])
+        [self _popoverWindowDidShow];
 }
 
-- (unsigned)styleMaskForBehavior
+- (unsigned)_styleMaskForBehavior
 {
-    return (_behavior == CPPopoverBehaviorTransient) ? CPClosableOnBlurWindowMask : 0;
+    if (_behavior == CPPopoverBehaviorApplicationDefined)
+        return 0;
+
+    return CPClosableOnBlurWindowMask
 }
 
 /*!
@@ -272,9 +288,9 @@ Set the behavior of the CPPopover. It can be:
     if ([_popoverWindow isClosing] || ![self isShown])
         return;
 
-    if (_implementedDelegateMethods & CPPopoverDelegate_popover_willClose_)
-        [_delegate popoverWillClose:self];
+    [self _popoverWillClose];
 
+    _positioningView = nil;
     [_popoverWindow close];
 
     // popoverDidClose will be sent from popoverWindowDidClose, since
@@ -282,8 +298,8 @@ Set the behavior of the CPPopover. It can be:
 }
 
 
-#pragma mark -
-#pragma mark Action
+// MARK: -
+// MARK: Action
 
 /*!
     Close the popover
@@ -295,19 +311,18 @@ Set the behavior of the CPPopover. It can be:
     if ([_popoverWindow isClosing])
         return;
 
-    if (_implementedDelegateMethods & CPPopoverDelegate_popover_shouldClose_)
-        if (![_delegate popoverShouldClose:self])
-            return;
+    if (![self _popoverShouldClose])
+        return;
 
     [self _close];
 }
 
 
-#pragma mark -
-#pragma mark Delegates
+// MARK: -
+// MARK: Delegates
 
 /*! @ignore */
-- (BOOL)popoverWindowShouldClose:(_CPPopoverWindow)aPopoverWindow
+- (BOOL)_popoverWindowShouldClose
 {
     [self performClose:self];
 
@@ -318,19 +333,42 @@ Set the behavior of the CPPopover. It can be:
 }
 
 /*! @ignore */
-- (void)popoverWindowDidClose:(_CPPopoverWindow)aPopoverWindow
+- (void)_popoverWindowDidClose
 {
     if (_implementedDelegateMethods & CPPopoverDelegate_popover_didClose_)
         [_delegate popoverDidClose:self];
 }
 
 /*! @ignore */
-- (void)popoverWindowDidShow:(_CPPopoverWindow)aPopoverWindow
+- (void)_popoverWindowDidShow
 {
     if (_implementedDelegateMethods & CPPopoverDelegate_popover_didShow_)
         [_delegate popoverDidShow:self];
 }
 
+/*! @ignore */
+- (BOOL)_popoverShouldClose
+{
+    if (_implementedDelegateMethods & CPPopoverDelegate_popover_shouldClose_)
+        return [_delegate popoverShouldClose:self];
+
+    return YES;
+}
+
+/*! @ignore */
+- (void)_popoverWillClose
+{
+    if (_implementedDelegateMethods & CPPopoverDelegate_popover_willClose_)
+        [_delegate popoverWillClose:self];
+}
+
+/*! @ignore */
+- (void)_popoverWillShow
+{
+    if (_implementedDelegateMethods & CPPopoverDelegate_popover_willShow_)
+        [_delegate popoverWillShow:self];
+}
+
 @end
 
 @implementation CPPopover (Deprecated)

AppKit/CPProgressIndicator.j

@@ -26,6 +26,7 @@
 @import "CPWindow_Constants.j"
 
 
+@typedef CPProgressIndicatorStyle
 /*
     @global
     @group CPProgressIndicatorStyle
@@ -85,6 +86,9 @@ var CPProgressIndicatorSpinningStyleColors = [];
             @"spinning-mini-gif": [CPNull null],
             @"spinning-small-gif": [CPNull null],
             @"spinning-regular-gif": [CPNull null],
+            @"circular-border-color": [CPNull null],
+            @"circular-border-size": 1,
+            @"circular-color": [CPNull null]
         };
 }
 
@@ -367,6 +371,7 @@ var CPProgressIndicatorSpinningStyleColors = [];
 - (void)drawBar
 {
     [self setNeedsLayout];
+    [self setNeedsDisplay:YES];
 }
 
 - (CPView)createEphemeralSubviewNamed:(CPString)aName
@@ -412,6 +417,9 @@ var CPProgressIndicatorSpinningStyleColors = [];
     {
         if (_style == CPProgressIndicatorSpinningStyle)
         {
+            if (!_indeterminate)
+                return;
+
             // This will cause the bar view to go away due to having a nil rect when _style == CPProgressIndicatorSpinningStyle.
             [self layoutEphemeralSubviewNamed:"bar-view"
                                    positioned:CPWindowBelow
@@ -437,6 +445,54 @@ var CPProgressIndicatorSpinningStyleColors = [];
         [self setBackgroundColor:nil];
 }
 
+- (void)drawRect:(CGRect)aRect
+{
+    if (_style == CPProgressIndicatorSpinningStyle && !_indeterminate)
+    {
+        var context = [[CPGraphicsContext currentContext] graphicsPort],
+            rect = CGRectMakeCopy(aRect),
+            borderSize = [self currentValueForThemeAttribute:@"circular-border-size"];
+
+        rect.origin.x += borderSize;
+        rect.origin.y += borderSize;
+        rect.size.width = rect.size.width - borderSize * 2;
+        rect.size.height = rect.size.height - borderSize * 2;
+
+        if ([self doubleValue] > [self minValue] && [self doubleValue] < [self maxValue])
+        {
+            var midX = CGRectGetMidX(rect),
+                midY = CGRectGetMidY(rect),
+                endAngle = Math.PI * 2 * (([self doubleValue] - [self minValue]) / ([self maxValue] - [self minValue])) - Math.PI / 2,
+                radius = MIN(rect.size.width / 2, rect.size.height / 2);
+
+            CGContextBeginPath(context);
+            CGContextSetLineWidth(context, borderSize);
+            CGContextSetFillColor(context, [self currentValueForThemeAttribute:@"circular-color"]);
+            CGContextMoveToPoint(context, midX, midY);
+            CGContextAddArc(context, midX, midY, radius, 3 * Math.PI / 2, endAngle, YES);
+            CGContextAddLineToPoint(context, midX, midY);
+            CGContextClosePath(context);
+            CGContextFillPath(context);
+            CGContextStrokePath(context);
+        }
+        else if ([self doubleValue] == [self maxValue])
+        {
+            CGContextBeginPath(context);
+            CGContextSetFillColor(context, [self currentValueForThemeAttribute:@"circular-color"]);
+            CGContextAddEllipseInRect(context, rect);
+            CGContextClosePath(context);
+            CGContextFillPath(context);
+        }
+
+        CGContextBeginPath(context);
+        CGContextSetStrokeColor(context , [self currentValueForThemeAttribute:@"circular-border-color"]);
+        CGContextSetLineWidth(context, borderSize);
+        CGContextAddEllipseInRect(context, rect);
+        CGContextClosePath(context);
+        CGContextStrokePath(context);
+    }
+}
+
 @end
 
 

AppKit/CPRadio.j

@@ -25,8 +25,11 @@
 
 @import "CPButton.j"
 
+@class CPRadioGroup
+
 @global CPApp
 
+CPRadioImageOffset = 4.0;
 
 /*!
     @ingroup appkit
@@ -64,10 +67,19 @@
     [[button1 radioGroup] selectedRadio] returns the currently selected
     option.
 
+    UPDATE 09/2020 : Implementation of modern Cocoa behavior :
+
+    As in Cocoa, radio buttons grouping is now automatic.
+
+    To be associated in a common group (and so being mutually exclusive),
+    radio buttons must combine 2 criteria :
+
+    - same superview (enclosing view)
+    - same action
+
+    TODO: This first implementation uses "as is" CPRadioGroup. This could
+          be simplified (no more need for radio group action, for example)
 */
-
-CPRadioImageOffset = 4.0;
-
 @implementation CPRadio : CPButton
 {
     CPRadioGroup    _radioGroup;
@@ -160,6 +172,71 @@ CPRadioImageOffset = 4.0;
         [CPApp sendAction:[_radioGroup action] to:[_radioGroup target] from:_radioGroup];
 }
 
+- (void)viewDidMoveToSuperview
+{
+    [self _setRadioGroup];
+    [super viewDidMoveToSuperview];
+}
+
+- (void)setAction:(SEL)anAction
+{
+    if (anAction === _action)
+        return;
+
+    [super setAction:anAction];
+    [self _setRadioGroup];
+}
+
+// MARK: Private methods
+
+- (void)_setRadioGroup
+{
+    // Implementation of modern Cocoa behavior : automatic radio group
+
+    // If no action is set or no superview, no grouping can be done.
+    if (![self action] || ![self superview])
+    {
+        // If this radio is in a group (size > 1), remove it.
+        if ([[self radioGroup] size] > 1)
+        {
+            [self setRadioGroup:[CPRadioGroup new]];
+
+            if ([self state] === CPOnState)
+                [_radioGroup _setSelectedRadio:self];
+        }
+
+        return;
+    }
+
+    // Search in superview subviews for other radio buttons having the same action.
+    // Take the one with the radio group having the greatest number of members.
+
+    var radioGroup;
+
+    for (var i = 0, superviewSubviews = [[self superview] subviews], count = [superviewSubviews count], aSubview, myAction = [self action], radioGroupSize = -1; (i < count); i++)
+    {
+        aSubview = superviewSubviews[i];
+
+        if ([aSubview isKindOfClass:CPRadio] && (aSubview !== self) && ([aSubview action] === myAction) && ([[aSubview radioGroup] size] > radioGroupSize))
+        {
+            radioGroup     = [aSubview radioGroup];
+            radioGroupSize = [radioGroup size];
+        }
+    }
+
+    if (radioGroup)
+        [self setRadioGroup:radioGroup];
+    else
+        // No other radio buttons to group with found.
+        // It may be because this radio button was in a radio group and its action was changed.
+        // If this is the case, we must reisolate it in a new radio group.
+        if ([_radioGroup size] > 1)
+            [self setRadioGroup:[CPRadioGroup new]];
+
+    if ([self state] === CPOnState)
+        [_radioGroup _setSelectedRadio:self];
+}
+
 @end
 
 var CPRadioRadioGroupKey    = @"CPRadioRadioGroupKey";
@@ -183,21 +260,37 @@ var CPRadioRadioGroupKey    = @"CPRadioRadioGroupKey";
     [aCoder encodeObject:_radioGroup forKey:CPRadioRadioGroupKey];
 }
 
-- (CPImage)image
+// MARK: -
+// MARK: Override methods from CPButton
+
+- (CPThemeState)_contentVisualState
 {
-    return [self currentValueForThemeAttribute:@"image"];
+    // Note : Behavior differs from CPButton as title doesn't follow the highlightsBy content flag
+
+    var visualState  = [self themeState] || CPThemeStateNormal, // Needed during theme compilation
+        currentState = [self state];
+
+    if ((currentState !== CPOffState) && (_showsStateBy & CPContentsCellMask))
+        visualState = visualState.and((currentState === CPOnState) ? CPThemeStateSelected : CPButtonStateMixed);
+
+    return visualState;
 }
 
-- (CPImage)alternateImage
+- (CPThemeState)_imageVisualState
 {
-    return [self currentValueForThemeAttribute:@"image"];
-}
+    // Note : Behavior differs from CPButton as we don't force "not selected" theme state
+    //        when button is highglighted and selected
 
-- (BOOL)startTrackingAt:(CGPoint)aPoint
-{
-    var startedTracking = [super startTrackingAt:aPoint];
-    [self highlight:YES];
-    return startedTracking;
+    var visualState  = [self themeState] || CPThemeStateNormal, // Needed during theme compilation
+        currentState = [self state];
+
+    if (_isHighlighted && (_highlightsBy & CPContentsCellMask))
+        visualState = visualState.and(CPThemeStateHighlighted);
+
+    if ((currentState !== CPOffState) && (_showsStateBy & CPContentsCellMask))
+        visualState = visualState.and((currentState === CPOnState) ? CPThemeStateSelected : CPButtonStateMixed);
+
+    return visualState;
 }
 
 @end
@@ -267,9 +360,9 @@ var CPRadioRadioGroupKey    = @"CPRadioRadioGroupKey";
 - (BOOL)selectRadioWithTag:(int)tag
 {
     var index = [_radios indexOfObjectPassingTest:function(radio)
-                    {
-                        return [radio tag] === tag;
-                    }];
+                {
+                    return [radio tag] === tag;
+                }];
 
     if (index !== CPNotFound)
     {
@@ -304,6 +397,11 @@ var CPRadioRadioGroupKey    = @"CPRadioRadioGroupKey";
     return _radios;
 }
 
+- (int)size
+{
+    return [_radios count];
+}
+
 - (void)setEnabled:(BOOL)enabled
 {
     [_radios makeObjectsPerformSelector:@selector(setEnabled:) withObject:enabled];
@@ -314,7 +412,7 @@ var CPRadioRadioGroupKey    = @"CPRadioRadioGroupKey";
     [_radios makeObjectsPerformSelector:@selector(setHidden:) withObject:hidden];
 }
 
-#pragma mark Private
+// MARK: Private
 
 - (void)_addRadio:(CPRadio)aRadio
 {
@@ -356,7 +454,7 @@ var CPRadioRadioGroupKey    = @"CPRadioRadioGroupKey";
     [_selectedRadio setState:CPOffState];
 
     _selectedRadio = aRadio;
-    [_CPRadioGroupSelectionBinder reverseSetValueForObject:self];
+    [_CPRadioGroupSelectionBinder _reverseSetValueFromExclusiveBinderForObject:self];
 }
 
 @end
@@ -407,32 +505,17 @@ var CPRadioGroupRadiosKey           = @"CPRadioGroupRadiosKey",
     return [super _binderClassForBinding:aBinding];
 }
 
-@end
++ (BOOL)isBindingExclusive:(CPString)aBinding
+{
+    return (aBinding == CPSelectedIndexBinding ||
+           aBinding == CPSelectedTagBinding ||
+           aBinding == CPSelectedValueBinding);
+}
 
-var binderForObject = {};
+@end
 
 @implementation _CPRadioGroupSelectionBinder : CPBinder
 {
-    CPString _selectionBinding @accessors;
-}
-
-- (id)initWithBinding:(CPString)aBinding name:(CPString)aName to:(id)aDestination keyPath:(CPString)aKeyPath options:(CPDictionary)options from:(id)aSource
-{
-    self = [super initWithBinding:aBinding name:aName to:aDestination keyPath:aKeyPath options:options from:aSource];
-
-    if (self)
-    {
-        binderForObject[[aSource UID]] = self;
-        _selectionBinding = aName;
-    }
-
-    return self;
-}
-
-+ (void)reverseSetValueForObject:(id)aSource
-{
-    var binder = binderForObject[[aSource UID]];
-    [binder reverseSetValueFor:[binder _selectionBinding]];
 }
 
 - (void)setPlaceholderValue:(id)aValue withMarker:(CPString)aMarker forBinding:(CPString)aBinding

AppKit/CPResponder.j

@@ -24,8 +24,10 @@
 @import <Foundation/CPObjJRuntime.j>
 
 @import "CPEvent.j"
+@import "CPCursor.j"
 
 @class CPKeyBinding
+@class CPMenu
 
 CPDeleteKeyCode         = 8;
 CPTabKeyCode            = 9;
@@ -199,6 +201,18 @@ CPDeleteForwardKeyCode  = 46;
     [_nextResponder performSelector:_cmd withObject:anEvent];
 }
 
+/*!
+ Notifies the receiver that the mouse entered the receiver's area and that it can adapt the cursor.
+ @param anEvent contains information about the exit
+ */
+- (void)cursorUpdate:(CPEvent)anEvent
+{
+    if (_nextResponder)
+        [_nextResponder performSelector:_cmd withObject:anEvent];
+    else
+        [[CPCursor arrowCursor] set];
+}
+
 /*!
     Notifies the receiver that the mouse scroll wheel has moved.
     @param anEvent information about the scroll
@@ -383,7 +397,7 @@ var CPResponderNextResponderKey = @"CPResponderNextResponderKey",
 - (void)encodeWithCoder:(CPCoder)aCoder
 {
     // This will come out nil on the other side with decodeObjectForKey:
-    if (_nextResponder !== nil)
+    if (_nextResponder != nil)
         [aCoder encodeConditionalObject:_nextResponder forKey:CPResponderNextResponderKey];
 
     [aCoder encodeObject:_menu forKey:CPResponderMenuKey];

AppKit/CPRuleEditor/CPPredicateEditor.j

@@ -34,7 +34,7 @@
     SEL     _predicateAction @accessors(property=action);
 }
 
-#pragma mark public methods
+// MARK: public methods
 /*!
     @ingroup appkit
     @class CPPredicateEditor
@@ -251,7 +251,7 @@
     return tree;
 }
 
-#pragma mark Set the Predicate
+// MARK: Set the Predicate
 
 - (void)setObjectValue:(id)objectValue
 {
@@ -269,6 +269,8 @@
     _currentAnimation = nil;
     _sendAction = NO;
 
+    var rows = [];
+
     if (predicate != nil)
     {
         if ((_nestingMode == CPRuleEditorNestingModeSimple || _nestingMode == CPRuleEditorNestingModeCompound)
@@ -276,10 +278,13 @@
             predicate = [[CPCompoundPredicate alloc] initWithType:[self _compoundPredicateTypeForRootRows] subpredicates:[CPArray arrayWithObject:predicate]];
 
         var row = [self _rowObjectFromPredicate:predicate];
+        
         if (row != nil)
-            [_boundArrayOwner setValue:[CPArray arrayWithObject:row] forKey:_boundArrayKeyPath];
+            [rows addObject:row];
     }
 
+    [_boundArrayOwner setValue:rows forKey:_boundArrayKeyPath];
+
     [self setAnimation:animation];
 }
 
@@ -369,7 +374,7 @@
     return row;
 }
 
-#pragma mark Get the predicate
+// MARK: Get the predicate
 
 - (void)_updatePredicate
 {
@@ -447,7 +452,7 @@
     return CPAndPredicateType;
 }
 
-#pragma mark Control delegate
+// MARK: Control delegate
 
 - (void)_sendRuleAction
 {
@@ -482,7 +487,7 @@
 }
 */
 
-#pragma mark RuleEditor delegate methods
+// MARK: RuleEditor delegate methods
 
 - (int)_queryNumberOfChildrenOfItem:(id)rowItem withRowType:(CPRuleEditorRowType)type
 {

AppKit/CPRuleEditor/CPPredicateEditorRowTemplate.j

@@ -27,8 +27,7 @@
 @import "CPMenuItem.j"
 @import "CPTextField.j"
 
-// NOTE: CPDatePicker is not implemented yet
-@class CPDatePicker
+@import "CPDatePicker.j"
 
 
 CPUndefinedAttributeType     = 0;
@@ -472,9 +471,11 @@ CPTransformableAttributeType = 1800;
 
     var value;
     if (attributeType >= CPInteger16AttributeType && attributeType <= CPFloatAttributeType)
-        value = [aView intValue];
+        value = [aView floatValue];
     else if (attributeType == CPBooleanAttributeType)
         value = [aView state];
+    else if (attributeType == CPDateAttributeType)
+        value = [aView dateValue];
     else
         value = [aView stringValue];
 
@@ -488,7 +489,36 @@ CPTransformableAttributeType = 1800;
 
 - (id)copy
 {
-    return [CPKeyedUnarchiver unarchiveObjectWithData:[CPKeyedArchiver archivedDataWithRootObject:self]];
+    var views = [CPArray array],
+        copy = [[[self class] alloc] init];
+
+    [copy _setTemplateType:_templateType];
+    [copy _setOptions:_predicateOptions];
+    [copy _setModifier:_predicateModifier];
+    [copy _setLeftAttributeType:_leftAttributeType];
+    [copy _setRightAttributeType:_rightAttributeType];
+    [copy setLeftIsWildcard:_leftIsWildcard];
+    [copy setRightIsWildcard:_rightIsWildcard];
+
+    [_views enumerateObjectsUsingBlock:function(aView, idx, stop)
+    {
+        var vcopy;
+
+        if ([aView implementsSelector:@selector(copy)])
+        {
+            vcopy = [aView copy];
+        }
+        else
+        {
+            vcopy = [CPKeyedUnarchiver unarchiveObjectWithData:[CPKeyedArchiver archivedDataWithRootObject:aView]];
+        }
+
+        [views addObject:vcopy];
+    }];
+
+    [copy setTemplateViews:views];
+
+    return copy;
 }
 
 + (id)_operatorsForAttributeType:(CPAttributeType)attributeType
@@ -680,7 +710,10 @@ CPTransformableAttributeType = 1800;
         view = [[CPCheckBox alloc] initWithFrame:CGRectMake(0, 0, 50, 26)];
     }
     else if (attributeType == CPDateAttributeType)
-        view = [[CPDatePicker alloc] initWithFrame:CGRectMake(0, 0, 150, 26)];
+    {
+        view = [[CPDatePicker alloc] initWithFrame:CGRectMake(0, 0, 180, 26)];
+        [view setDatePickerElements:CPYearMonthDayDatePickerElementFlag];
+    }
     else
         return nil;
 
@@ -797,5 +830,31 @@ var CPPredicateTemplateTypeKey = @"CPPredicateTemplateType",
     [coder encodeObject:_views forKey:CPPredicateTemplateViewsKey];
 }
 
+@end
+
+// Copy support for built-in types
+@implementation CPDatePicker (CPCopying)
+
+- (id)copy
+{
+    var ret = [[[self class] alloc] initWithFrame:[self frame]];
+
+    [ret setTextFont:[self textFont]];
+    [ret setMinDate:[self minDate]];
+    [ret setMaxDate:[self maxDate]];
+    [ret setTimeInterval:[self timeInterval]];
+    [ret setDatePickerMode:[self datePickerMode]];
+    [ret setDatePickerElements:[self datePickerElements]];
+    [ret setDatePickerStyle:[self datePickerStyle]];
+    [ret setLocale:[self locale]];
+    [ret setDateValue:[self dateValue]];
+    [ret setBackgroundColor:[self backgroundColor]];
+    [ret setDrawsBackground:[self drawsBackground]];
+    [ret setBordered:[self isBordered]];
+    [ret _init];
+
+    return ret;
+}
+
 @end
 /*! @endcond */

AppKit/CPRuleEditor/CPRuleEditor.j

@@ -41,6 +41,21 @@
 @global CPCaseInsensitivePredicateOption
 @global CPOrPredicateType
 
+@protocol CPRuleEditorDelegate <CPObject>
+
+@required
+- (id)ruleEditor:(CPRuleEditor)editor child:(CPInteger)index forCriterion:(id)criterion withRowType:(CPRuleEditorRowType)rowType;
+- (id)ruleEditor:(CPRuleEditor)editor displayValueForCriterion:(id)criterion inRow:(CPInteger)row;
+- (CPInteger)ruleEditor:(CPRuleEditor)editor numberOfChildrenForCriterion:(id)criterion withRowType:(CPRuleEditorRowType)rowType;
+
+@optional
+- (CPDictionary)ruleEditor:(CPRuleEditor)editor predicatePartsForCriterion:(id)criterion withDisplayValue:(id)value inRow:(CPInteger)row;
+- (void)ruleEditorRowsDidChange:(CPNotification)notification;
+
+@end
+
+var CPRuleEditorDelegate_ruleEditor_predicatePartsForCriterion_withDisplayValue_inRow_   = 1 << 1;
+
 var CPRuleEditorItemPBoardType  = @"CPRuleEditorItemPBoardType",
     itemsContext                = "items",
     valuesContext               = "values",
@@ -65,54 +80,84 @@ var CPRuleEditorItemPBoardType  = @"CPRuleEditorItemPBoardType",
     @n      An ordered to-many relation containing the display values for the row.
     @n@n @c @@"criteria"
     @n      An ordered to-many relation containing the criteria for the row.
+    @n@n
+    Localization & Positional Reordering
+    @n
+    CPRuleEditor supports complete localization of menu items and grammatical positional reordering (sentence structure layout adjustment) via strings resource files (.strings) or custom programmatic CPDictionary tables.
+    @n@n
+    Since sentence structures vary significantly across languages, the editor can dynamically reposition views (such as popups, static labels, and text fields) from left to right to form grammatically correct sentences.
+    @n@n
+    Formatting Keys (English representation):
+    @n @c %[%]@@
+    @n      Represents a popup button displaying its selected value (e.g. @c %[firstName]@@).
+    @n @c %@@
+    @n      Represents an editable text input field.
+    @n Static text represents a literal label placed directly inside the formatting key.
+    @n@n
+    Example English format key:
+    @n @c "%[firstName]@ %[is equal to]@ %@"
+    @n@n
+    Translation Patterns (Target language):
+    @n Positional specifiers such as @c %1$@@, @c %2$@@, @c %3$@@ dictate the visual order of views from left to right.
+    @n Bracketed values inside positional specifiers (e.g. @c %1$[Nombre]@@) define the localized title for popup selection items.
+    @n Literal text outside the specifiers (such as @c "y" or @c "und") is automatically instantiated as static text labels positioned between controls.
+    @n@n
+    Example translations:
+    @n@n
+    Spanish (Reorders to: [1: Name] y [3: Value] [2: are equal]):
+    @n @c "%[firstName]@ %[is equal to]@ %@" = "%1$[Nombre]@ y %3$@ %2$[son iguales]@";
+    @n@n
+    German (Reorders to: [1: First Name] und [3: Value] [2: are equal]):
+    @n @c "%[firstName]@ %[is equal to]@ %@" = "%1$[Vorname]@ und %3$@ %2$[sind gleich]@";
 */
 
 @implementation CPRuleEditor : CPControl
 {
-    BOOL             _suppressKeyDownHandling;
-    BOOL             _allowsEmptyCompoundRows;
-    BOOL             _disallowEmpty;
-    BOOL             _delegateWantsValidation;
-    BOOL             _editable;
-    BOOL             _sendAction;
+    BOOL                        _suppressKeyDownHandling;
+    BOOL                        _allowsEmptyCompoundRows;
+    BOOL                        _disallowEmpty;
+    BOOL                        _delegateWantsValidation;
+    BOOL                        _editable;
+    BOOL                        _sendAction;
 
-    Class           _rowClass;
+    Class                       _rowClass;
 
-    CPIndexSet      _draggingRows;
-    CPInteger       _subviewIndexOfDropLine;
-    CPView          _dropLineView;
+    CPIndexSet                  _draggingRows;
+    CPInteger                   _subviewIndexOfDropLine;
+    CPView                      _dropLineView;
 
-    CPMutableArray  _rowCache;
-    CPMutableArray  _slices;
+    CPMutableArray              _rowCache;
+    CPMutableArray              _slices;
 
-    CPPredicate     _predicate;
+    CPPredicate                 _predicate;
 
-    CPString        _itemsKeyPath;
-    CPString        _subrowsArrayKeyPath;
-    CPString        _typeKeyPath;
-    CPString        _valuesKeyPath;
-    CPString        _boundArrayKeyPath @accessors(property=boundArrayKeyPath);
+    CPString                    _itemsKeyPath;
+    CPString                    _subrowsArrayKeyPath;
+    CPString                    _typeKeyPath;
+    CPString                    _valuesKeyPath;
+    CPString                    _boundArrayKeyPath @accessors(property=boundArrayKeyPath);
 
-    CPView          _slicesHolder;
-    CPViewAnimation _currentAnimation;
+    CPView                      _slicesHolder;
+    CPViewAnimation             _currentAnimation;
 
-    CPInteger       _lastRow;
-    CPInteger       _nestingMode;
+    CPInteger                   _lastRow;
+    CPInteger                   _nestingMode;
 
-    float           _alignmentGridWidth;
-    float           _sliceHeight;
+    float                       _alignmentGridWidth;
+    float                       _sliceHeight;
 
-    id              _ruleDataSource;
-    id              _ruleDelegate;
-    id              _boundArrayOwner;
+    id                          _ruleDataSource;
+    id <CPRuleEditorDelegate>   _ruleDelegate;
+    id                          _boundArrayOwner;
+    unsigned                    _implementedDelegateMethods;
 
-    CPString        _stringsFilename;
+    CPString                    _stringsFilename;
 
-    BOOL            _isKeyDown;
-    BOOL            _nestingModeDidChange;
+    BOOL                        _isKeyDown;
+    BOOL                        _nestingModeDidChange;
 
-    _CPRuleEditorLocalizer _standardLocalizer @accessors(property=standardLocalizer);
-    CPDictionary           _itemsAndValuesToAddForRowType;
+    _CPRuleEditorLocalizer      _standardLocalizer;
+    CPDictionary                _itemsAndValuesToAddForRowType;
 }
 
 /*! @cond */
@@ -130,20 +175,22 @@ var CPRuleEditorItemPBoardType  = @"CPRuleEditorItemPBoardType",
             @"slice-top-border-color": [CPNull null],
             @"slice-bottom-border-color": [CPNull null],
             @"slice-last-bottom-border-color": [CPNull null],
-            @"font": [CPNull null],
+            @"font": [CPFont systemFontOfSize:12],
+            @"font-color": [CPNull null],
             @"add-image": [CPNull null],
             @"remove-image": [CPNull null],
+            @"vertical-alignment": [CPNull null]
         };
 }
 
 - (id)initWithFrame:(CGRect)frame
 {
     self = [super initWithFrame:frame];
-    if (self !== nil)
+    if (self)
     {
         _slices = [[CPMutableArray alloc] init];
 
-        _sliceHeight = 26.;
+        _sliceHeight = 26.0;
         _nestingMode = CPRuleEditorNestingModeSimple; // 10.5 default is CPRuleEditorNestingModeCompound
         _editable = YES;
         _allowsEmptyCompoundRows = NO;
@@ -189,8 +236,34 @@ var CPRuleEditorItemPBoardType  = @"CPRuleEditorItemPBoardType",
 
     [self registerForDraggedTypes:[CPArray arrayWithObjects:CPRuleEditorItemPBoardType,nil]];
     [_boundArrayOwner addObserver:self forKeyPath:_boundArrayKeyPath options:CPKeyValueObservingOptionOld | CPKeyValueObservingOptionNew context:boundArrayContext];
+
+    [[CPNotificationCenter defaultCenter] addObserver:self
+                                             selector:@selector(_ruleEditorLocalizerDidLoad:)
+                                                 name:@"_CPRuleEditorLocalizerDidLoadNotification"
+                                               object:nil];
 }
 
+
+- (void)_ruleEditorLocalizerDidLoad:(CPNotification)aNotification
+{
+    if ([aNotification object] === [self standardLocalizer])
+    {
+        // Defer execution to the next run loop cycle so that any active slice 
+        // insertions have fully completed and are present in the `_slices` array.
+        [[CPRunLoop mainRunLoop] performBlock:function() {
+            var count = [_slices count];
+            for (var i = 0; i < count; i++)
+            {
+                var slice = [_slices objectAtIndex:i];
+                [slice _reconfigureSubviews];
+                [slice _updateButtonVisibilities]; // Force updates on row button tooltips
+            }
+            
+            [self _updatePredicate];
+            [self _sendRuleAction];
+        } argument:nil order:0 modes:[CPDefaultRunLoopMode]];
+    }
+}
 /*! @endcond */
 
 /*!
@@ -213,19 +286,24 @@ var CPRuleEditorItemPBoardType  = @"CPRuleEditorItemPBoardType",
     @discussion CPRuleEditor requires a delegate that implements the required delegate methods to function.
     @see delegate
 */
-- (void)setDelegate:(id)aDelegate
+- (void)setDelegate:(id <CPRuleEditorDelegate>)aDelegate
 {
     if (_ruleDelegate === aDelegate)
         return;
 
     var nc = [CPNotificationCenter defaultCenter];
+
     if (_ruleDelegate)
         [nc removeObserver:_ruleDelegate name:nil object:self];
 
     _ruleDelegate = aDelegate;
+    _implementedDelegateMethods = 0;
 
     if ([_ruleDelegate respondsToSelector:@selector(ruleEditorRowsDidChange:)])
         [nc addObserver:_ruleDelegate selector:@selector(ruleEditorRowsDidChange:) name:CPRuleEditorRowsDidChangeNotification object:nil];
+
+    if ([_ruleDelegate respondsToSelector:@selector(ruleEditor:predicatePartsForCriterion:withDisplayValue:inRow:)])
+        _implementedDelegateMethods |= CPRuleEditorDelegate_ruleEditor_predicatePartsForCriterion_withDisplayValue_inRow_;
 }
 /*!
     @brief Returns a Boolean value that indicates whether the receiver is editable.
@@ -361,7 +439,7 @@ var CPRuleEditorItemPBoardType  = @"CPRuleEditorItemPBoardType",
 */
 - (CPDictionary)formattingDictionary
 {
-    return [_standardLocalizer dictionary];
+    return [[self standardLocalizer] dictionary];
 }
 
 /*!
@@ -373,6 +451,9 @@ var CPRuleEditorItemPBoardType  = @"CPRuleEditorItemPBoardType",
 */
 - (void)setFormattingDictionary:(CPDictionary)dictionary
 {
+    if (_standardLocalizer == nil)
+        _standardLocalizer = [_CPRuleEditorLocalizer new];
+
     [_standardLocalizer setDictionary:dictionary];
     _stringsFilename = nil;
 }
@@ -396,7 +477,7 @@ var CPRuleEditorItemPBoardType  = @"CPRuleEditorItemPBoardType",
 */
 - (void)setFormattingStringsFilename:(CPString)stringsFilename
 {
-    if (_standardLocalizer === nil)
+    if (_standardLocalizer == nil)
         _standardLocalizer = [_CPRuleEditorLocalizer new];
 
     if (_stringsFilename !== stringsFilename)
@@ -404,19 +485,32 @@ var CPRuleEditorItemPBoardType  = @"CPRuleEditorItemPBoardType",
         // Convert an empty string to nil
         _stringsFilename = stringsFilename || nil;
 
-        if (stringsFilename !== nil)
+        if (stringsFilename != nil)
         {
             if (![stringsFilename hasSuffix:@".strings"])
                 stringsFilename = stringsFilename + @".strings";
 
             var path = [[CPBundle mainBundle] pathForResource:stringsFilename];
 
-            if (path !== nil)
+            if (path != nil)
                 [_standardLocalizer loadContentOfURL:[CPURL URLWithString:path]];
         }
     }
 }
 
+- (_CPRuleEditorLocalizer)standardLocalizer
+{
+    if (_standardLocalizer == nil)
+        _standardLocalizer = [_CPRuleEditorLocalizer new];
+
+    return _standardLocalizer;
+}
+
+- (void)setStandardLocalizer:(_CPRuleEditorLocalizer)aLocalizer
+{
+    _standardLocalizer = aLocalizer;
+}
+
 /*!
     @name Providing Data
 */
@@ -442,7 +536,7 @@ var CPRuleEditorItemPBoardType  = @"CPRuleEditorItemPBoardType",
 */
 - (void)setCriteria:(CPArray)criteria andDisplayValues:(CPArray)values forRowAtIndex:(int)rowIndex
 {
-    if (criteria === nil || values === nil)
+    if (criteria == nil || values == nil)
         [CPException raise:CPInvalidArgumentException reason:_cmd + @". criteria and values parameters must not be nil."];
 
     if (rowIndex < 0 || rowIndex >= [self numberOfRows])
@@ -515,7 +609,7 @@ var CPRuleEditorItemPBoardType  = @"CPRuleEditorItemPBoardType",
         if ([self rowTypeForRow:current_index] === CPRuleEditorRowTypeCompound)
         {
             var candidate = [[self _rowCacheForIndex:current_index] rowObject],
-                subObjects = [[self _subrowObjectsOfObject:candidate] _representedObject];
+                subObjects = [self _subrowObjectsOfObject:candidate]; // Standard direct array query
 
             if ([subObjects indexOfObjectIdenticalTo:targetObject] !== CPNotFound)
                 return current_index;
@@ -582,7 +676,7 @@ TODO: implement
     for (var i = rowIndex + 1; i < count; i++)
     {
         var candidate = [[self _rowCacheForIndex:i] rowObject],
-            indexInSubrows = [[subobjects _representedObject] indexOfObjectIdenticalTo:candidate];
+            indexInSubrows = [subobjects indexOfObjectIdenticalTo:candidate]; // Standard direct array query
 
         if (indexInSubrows !== CPNotFound)
         {
@@ -751,7 +845,7 @@ TODO: implement
     while (current_index !== CPNotFound)
     {
         var rowObject = [[self _rowCacheForIndex:current_index] rowObject],
-            relativeChildIndex = [[subrows _representedObject] indexOfObjectIdenticalTo:rowObject];
+            relativeChildIndex = [subrows indexOfObjectIdenticalTo:rowObject]; // Standard direct array query
 
         if (relativeChildIndex !== CPNotFound)
             [childsIndexes addIndex:relativeChildIndex];
@@ -808,9 +902,8 @@ TODO: implement
     for (i = 0; i < count; i++)
     {
         var item = [items objectAtIndex:i],
-        //var displayValue = [self _queryValueForItem:item inRow:aRow]; Ask the delegate or get cached value ?.
             displayValue = [[self displayValuesForRow:aRow] objectAtIndex:i],
-            predpart = [_ruleDelegate ruleEditor:self predicatePartsForCriterion:item withDisplayValue:displayValue inRow:aRow];
+            predpart = [self _sendDelegateRuleEditorPredicatePartsForCriterion:item withDisplayValue:displayValue inRow:aRow];
 
         if (predpart)
             [predicateParts addEntriesFromDictionary:predpart];
@@ -826,10 +919,11 @@ TODO: implement
             return nil;
 
         var current_index = [subrowsIndexes firstIndex];
+
         while (current_index !== CPNotFound)
         {
             var subpredicate = [self predicateForRow:current_index];
-            if (subpredicate !== nil)
+            if (subpredicate != nil)
                 [subpredicates addObject:subpredicate];
 
             current_index = [subrowsIndexes indexGreaterThanIndex:current_index];
@@ -865,33 +959,33 @@ TODO: implement
         modifier = [predicateParts objectForKey:CPRuleEditorPredicateComparisonModifier],
         selector = CPSelectorFromString([predicateParts objectForKey:CPRuleEditorPredicateCustomSelector]);
 
-    if (lhs === nil)
+    if (lhs == nil)
     {
         CPLogConsole(@"missing left expression in predicate parts dictionary");
         return NULL;
     }
 
-    if (rhs === nil)
+    if (rhs ==  nil)
     {
         CPLogConsole(@"missing right expression in predicate parts dictionary");
         return NULL;
     }
 
-    if (selector === nil && operator === nil)
+    if (selector == nil && operator == nil)
     {
         CPLogConsole(@"missing operator and selector in predicate parts dictionary");
         return NULL;
     }
 
-    if (modifier === nil)
+    if (modifier == nil)
         CPLogConsole(@"missing modifier in predicate parts dictionary. Setting default: CPDirectPredicateModifier");
 
-    if (options === nil)
+    if (options == nil)
         CPLogConsole(@"missing options in predicate parts dictionary. Setting default: CPCaseInsensitivePredicateOption");
 
     try
     {
-        if (selector !== nil)
+        if (selector != nil)
             predicate = [CPComparisonPredicate predicateWithLeftExpression:lhs
                                                            rightExpression:rhs
                                                             customSelector:selector
@@ -1144,7 +1238,7 @@ TODO: implement
 
 - (BOOL)_wantsRowAnimations
 {
-    return (_currentAnimation !== nil);
+    return (_currentAnimation != nil);
 }
 
 - (void)_updateButtonVisibilities
@@ -1210,7 +1304,7 @@ TODO: implement
     return shouldHide;
 }
 
-#pragma mark Rows management
+// MARK: Rows management
 
 - (id)_rowCacheForIndex:(int)index
 {
@@ -1255,23 +1349,28 @@ TODO: implement
 
     while (current_index !== CPNotFound)
     {
-        var parentIndex = [self parentRowForRow:current_index],
-            subrowsIndexes = [self subrowIndexesForRow:parentIndex];
-
-        if ([subrowsIndexes count] === 1)
+        var parentIndex = [self parentRowForRow:current_index];
+        
+        // If the row has a valid parent in the editor (i.e. not a root row)
+        if (parentIndex !== -1)
         {
-            if (parentIndex !== -1)
-                return [CPIndexSet indexSetWithIndex:0];
+            var subrowsIndexes = [self subrowIndexesForRow:parentIndex];
 
-            var childlessGranPa = [self _childlessParentsIfSlicesWereDeletedAtIndexes:[CPIndexSet indexSetWithIndex:parentIndex]];
-            [childlessParents addIndexes:childlessGranPa];
+            // If deleting this row leaves the parent with no remaining child rows
+            if ([subrowsIndexes count] === 1)
+            {
+                [childlessParents addIndex:parentIndex];
+
+                // Recursively check if deleting this parent row leaves the grandparent childless
+                var childlessGranPa = [self _childlessParentsIfSlicesWereDeletedAtIndexes:[CPIndexSet indexSetWithIndex:parentIndex]];
+                [childlessParents addIndexes:childlessGranPa];
+            }
         }
 
         current_index = [indexes indexGreaterThanIndex:current_index];
     }
 
     return childlessParents;
-    // (id)-[RuleEditor _includeSubslicesForSlicesAtIndexes:]
 }
 
 - (CPIndexSet)_includeSubslicesForSlicesAtIndexes:(CPIndexSet)indexes
@@ -1333,8 +1432,25 @@ TODO: implement
 
         if ([self rowTypeForRow:row] === type && itemIndex < [aCriteria count])
         {
-            var crit = [aCriteria objectAtIndex:itemIndex];
-            [current_criterions addObject:crit];
+            // Verify that this row's parent path matches the path currently being built
+            var pathMatches = true;
+            for (var p = 0; p < itemIndex; p++)
+            {
+                var criterionA = [aCriteria objectAtIndex:p],
+                    criterionB = [items objectAtIndex:p];
+
+                if (criterionA !== criterionB && (typeof criterionA.isEqual !== "function" || ![criterionA isEqual:criterionB]))
+                {
+                    pathMatches = false;
+                    break;
+                }
+            }
+
+            if (pathMatches)
+            {
+                var crit = [aCriteria objectAtIndex:itemIndex];
+                [current_criterions addObject:crit];
+            }
         }
     }
 
@@ -1450,7 +1566,7 @@ TODO: implement
     return row;
 }
 
-#pragma mark Key value observing
+// MARK: Key value observing
 
 - (void)_startObservingRowObjectsRecursively:(CPArray)rowObjects
 {
@@ -1716,8 +1832,7 @@ TODO: implement
 {
     if (_delegateWantsValidation)
     {
-        var selector = @selector(ruleEditor:predicatePartsForCriterion:withDisplayValue:inRow:);
-        if (![_ruleDelegate respondsToSelector:selector])
+        if (![self _delegateRespondsToRuleEditorPredicatePartsForCriterionWithDisplayValueInRow])
             return;
 
         _delegateWantsValidation = NO;
@@ -1731,7 +1846,7 @@ TODO: implement
     {
         var subpredicate = [self predicateForRow:current_index];
 
-        if (subpredicate !== nil)
+        if (subpredicate != nil)
             [subpredicates addObject:subpredicate];
 
         current_index = [subindexes indexGreaterThanIndex:current_index];
@@ -1752,7 +1867,12 @@ TODO: implement
 
 - (_CPRuleEditorViewSliceRow)_createNewSliceWithFrame:(CGRect)frame ruleEditorView:(CPRuleEditor)editor
 {
-    return [[_CPRuleEditorViewSliceRow alloc] initWithFrame:frame ruleEditorView:editor];
+    var slice = [[_CPRuleEditorViewSliceRow alloc] initWithFrame:frame ruleEditorView:editor];
+    
+    // Ensure the slice resizes with the editor
+    [slice setAutoresizingMask:CPViewWidthSizable];
+    
+    return slice;
 }
 
 - (void)_reconfigureSubviewsAnimate:(BOOL)animate
@@ -1773,7 +1893,7 @@ TODO: implement
             startRect = [aslice frame],
             startIndex = [aslice rowIndex] - 1;
 
-        if ([aslice superview] === nil)
+        if ([aslice superview] == nil)
         {
             startRect = CGRectMake(0, startIndex * _sliceHeight, CGRectGetWidth(startRect), _sliceHeight);
             [aslice _reconfigureSubviews];
@@ -1865,29 +1985,49 @@ TODO: implement
     return [self valueForThemeAttribute:@"font"];
 }
 
-- (CPImage)_addImage
+- (CPColor)_fontColor
 {
-    return [self valueForThemeAttribute:@"add-image"];
+    return [self valueForThemeAttribute:@"font-color"];
 }
 
-- (CPImage)_removeImage
+- (CPImage)_imageAdd
 {
-    return [self valueForThemeAttribute:@"remove-image"];
+    return [self valueForThemeAttribute:@"add-image" inState:CPThemeStateNormal];
+}
+
+- (CPImage)_imageAddHighlighted
+{
+    return [self valueForThemeAttribute:@"add-image" inState:CPThemeStateHighlighted];
+}
+
+- (CPImage)_imageRemove
+{
+    return [self valueForThemeAttribute:@"remove-image" inState:CPThemeStateNormal];
+}
+
+- (CPImage)_imageRemoveHighlighted
+{
+    return [self valueForThemeAttribute:@"remove-image" inState:CPThemeStateHighlighted];
+}
+
+- (CPVerticalTextAlignment)_verticalAlignment
+{
+    return [self valueForThemeAttribute:@"vertical-alignment"];
 }
 
 - (CPString)_toolTipForAddCompoundRowButton
 {
-    return [_standardLocalizer localizedStringForString:@"Add compound row"];
+    return [[self standardLocalizer] localizedStringForString:@"Add compound row"];
 }
 
 - (CPString)_toolTipForAddSimpleRowButton
 {
-    return [_standardLocalizer localizedStringForString:@"Add row"];
+    return [[self standardLocalizer] localizedStringForString:@"Add row"];
 }
 
 - (CPString)_toolTipForDeleteRowButton
 {
-    return [_standardLocalizer localizedStringForString:@"Delete row"];
+    return [[self standardLocalizer] localizedStringForString:@"Delete row"];
 }
 
 - (void)_updateSliceIndentations
@@ -2079,7 +2219,7 @@ TODO: implement
         return;
 
     var point = [self convertPoint:[event locationInWindow] fromView:nil],
-        view = [_slices objectAtIndex:FLOOR(point.y / _sliceHeight)];
+        view = [_slices objectAtIndex:FLOOR(MAX(0, point.y) / _sliceHeight)];
 
     if ([self _dragShouldBeginFromMouseDown:view])
         [self _performDragForSlice:view withEvent:event];
@@ -2087,7 +2227,7 @@ TODO: implement
 
 - (BOOL)_dragShouldBeginFromMouseDown:(CPView)view
 {
-    return (([self nestingMode] === CPRuleEditorNestingModeList ||  [view rowIndex] !== 0) && _editable && [view isKindOfClass:[_CPRuleEditorViewSliceRow class]] && _draggingRows === nil);
+    return (([self nestingMode] === CPRuleEditorNestingModeList ||  [view rowIndex] !== 0) && _editable && [view isKindOfClass:[_CPRuleEditorViewSliceRow class]] && _draggingRows == nil);
 }
 
 - (BOOL)_performDragForSlice:(id)slice withEvent:(CPEvent)event
@@ -2165,7 +2305,7 @@ TODO: implement
         indexOfDropLine =  FLOOR(y / _sliceHeight),
         numberOfRows = [self numberOfRows];
 
-    if (indexOfDropLine < 0 || indexOfDropLine > numberOfRows || (indexOfDropLine >= [_draggingRows firstIndex] && indexOfDropLine <= [_draggingRows lastIndex] + 1))
+    if (indexOfDropLine <= 0 || indexOfDropLine > numberOfRows || (indexOfDropLine >= [_draggingRows firstIndex] && indexOfDropLine <= [_draggingRows lastIndex] + 1))
     {
         if (_subviewIndexOfDropLine !== CPNotFound && indexOfDropLine !== _subviewIndexOfDropLine)
             [self _clearDropLine];
@@ -2202,33 +2342,41 @@ TODO: implement
 
 - (BOOL)performDragOperation:(id /*< CPDraggingInfo >*/)info
 {
-    var aboveInsertIndexCount = 0,
-        object,
-        removeIndex;
+    var object;
 
     var rowObjects = [_rowCache valueForKey:@"rowObject"],
         index = [_draggingRows lastIndex];
 
-    var parentRowIndex = [self parentRowForRow:index], // first index of draggingrows
+    var firstDraggingIndex = [_draggingRows firstIndex],
+        parentRowIndex = [self parentRowForRow:firstDraggingIndex],
         parentRowObject = (parentRowIndex === -1) ? _boundArrayOwner : [[self _rowCacheForIndex:parentRowIndex] rowObject],
         insertIndex = _subviewIndexOfDropLine;
 
     while (index !== CPNotFound)
     {
-        if (index >= insertIndex)
+        // Identify if this row's parent is also inside the dragging set.
+        // If it is, we skip it because it will move automatically with its parent.
+        var parentOfCurrent = [self parentRowForRow:index];
+        if (parentOfCurrent !== -1 && [_draggingRows containsIndex:parentOfCurrent])
         {
-            removeIndex = index + aboveInsertIndexCount;
-            aboveInsertIndexCount += 1;
-        }
-        else
-        {
-            removeIndex = index;
-            insertIndex -= 1;
+            index = [_draggingRows indexLessThanIndex:index];
+            continue;
         }
 
-        object = [rowObjects objectAtIndex:removeIndex];
-        [self removeRowAtIndex:removeIndex];
-        [[self _subrowObjectsOfObject:parentRowObject] insertObject:object atIndex:insertIndex - parentRowIndex - 1];
+        object = [rowObjects objectAtIndex:index];
+        
+        // Find the current live index of the object inside the editor
+        var cache = [self _searchCacheForRowObject:object];
+        var liveIndex = [_rowCache indexOfObjectIdenticalTo:cache];
+
+        if (liveIndex !== CPNotFound)
+        {
+            if (liveIndex < insertIndex)
+                insertIndex -= 1;
+
+            [self removeRowAtIndex:liveIndex];
+            [[self _subrowObjectsOfObject:parentRowObject] insertObject:object atIndex:insertIndex - parentRowIndex - 1];
+        }
 
         index = [_draggingRows indexLessThanIndex:index];
     }
@@ -2238,6 +2386,7 @@ TODO: implement
     return YES;
 }
 
+
 - (CPIndexSet)_draggingTypes
 {
     return [CPIndexSet indexSetWithIndex:CPDragOperationMove];
@@ -2279,7 +2428,7 @@ TODO: implement
 
 - (void)_postRowCountChangedNotificationOfType:(CPString)notificationName indexes:indexes
 {
-    var userInfo = indexes === nil ? @{} : @{ "indexes": indexes };
+    var userInfo = indexes == nil ? @{} : @{ "indexes": indexes };
     [[CPNotificationCenter defaultCenter] postNotificationName:notificationName object:self userInfo:userInfo];
 }
 
@@ -2344,7 +2493,7 @@ TODO: implement
     var criteria = [self criteriaForRow:aRow];
     indexofCriterion = [criteria indexOfObject:criterion];
 
-    if (parentItem !== nil
+    if (parentItem != nil
         && indexofCriterion !== CPNotFound
         && indexofCriterion < [criteria count] - 1)
     {
@@ -2377,6 +2526,33 @@ TODO: implement
 
 @end
 
+
+@implementation CPRuleEditor (CPRuleEditorDelegate)
+
+/*!
+    @ignore
+    Check if the delegate responds to ruleEditor:predicatePartsForCriterion:withDisplayValue:inRow:
+*/
+- (BOOL)_delegateRespondsToRuleEditorPredicatePartsForCriterionWithDisplayValueInRow
+{
+    return _implementedDelegateMethods & CPRuleEditorDelegate_ruleEditor_predicatePartsForCriterion_withDisplayValue_inRow_;
+}
+
+/*!
+    @ignore
+    Call delegate ruleEditor:predicatePartsForCriterion:withDisplayValue:inRow:
+*/
+- (CPDictionary)_sendDelegateRuleEditorPredicatePartsForCriterion:(id)criterion withDisplayValue:(id)value inRow:(CPInteger)row
+{
+    if (!(_implementedDelegateMethods & CPRuleEditorDelegate_ruleEditor_predicatePartsForCriterion_withDisplayValue_inRow_))
+        return @{};
+
+    return [_ruleDelegate ruleEditor:self predicatePartsForCriterion:criterion withDisplayValue:value inRow:row];
+}
+
+@end
+
+
 var CPRuleEditorAlignmentGridWidthKey       = @"CPRuleEditorAlignmentGridWidth",
     CPRuleEditorSliceHeightKey              = @"CPRuleEditorSliceHeight",
     CPRuleEditorStringsFilenameKey          = @"CPRuleEditorStringsFilename",
@@ -2400,7 +2576,7 @@ var CPRuleEditorAlignmentGridWidthKey       = @"CPRuleEditorAlignmentGridWidth",
 - (id)initWithCoder:(CPCoder)coder
 {
     self = [super initWithCoder:coder];
-    if (self !== nil)
+    if (self)
     {
         [self setFormattingStringsFilename:[coder decodeObjectForKey:CPRuleEditorStringsFilenameKey]];
         _alignmentGridWidth      = [coder decodeFloatForKey:CPRuleEditorAlignmentGridWidthKey];
@@ -2484,7 +2660,7 @@ var CriteriaKey         = @"criteria",
 - (id)initWithCoder:(CPCoder)coder
 {
     self = [super init];
-    if (self !== nil)
+    if (self)
     {
         subrows = [coder decodeObjectForKey:SubrowsKey];
         criteria = [coder decodeObjectForKey:CriteriaKey];

AppKit/CPRuleEditor/CPRuleEditor_Constants.j

@@ -20,6 +20,7 @@
  * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
  */
 
+
 CPRuleEditorPredicateLeftExpression     = "CPRuleEditorPredicateLeftExpression";
 CPRuleEditorPredicateRightExpression    = "CPRuleEditorPredicateRightExpression";
 CPRuleEditorPredicateComparisonModifier = "CPRuleEditorPredicateComparisonModifier";
@@ -36,5 +37,6 @@ CPRuleEditorNestingModeList     = 1;        // Allows a single list, with no nes
 CPRuleEditorNestingModeCompound = 2;        // Unlimited nesting and compound rows; this is the default
 CPRuleEditorNestingModeSimple   = 3;        // One compound row at the top with subrows beneath it, and no further nesting allowed
 
+@typedef CPRuleEditorRowType
 CPRuleEditorRowTypeSimple       = 0;
 CPRuleEditorRowTypeCompound     = 1;

AppKit/CPRuleEditor/_CPPredicateEditorRowNode.j

@@ -131,7 +131,7 @@
 {
     var title = [self title];
 
-    if (title !== nil)
+    if (title != nil)
         return title;
 
     return [self templateView];

AppKit/CPRuleEditor/_CPPredicateEditorTree.j

@@ -20,6 +20,8 @@
 @import <Foundation/CPObject.j>
 @import <Foundation/CPString.j>
 
+@class CPPredicateEditorRowTemplate
+
 @implementation _CPPredicateEditorTree : CPObject
 {
     CPPredicateEditorRowTemplate         template @accessors;

AppKit/CPRuleEditor/_CPRuleEditorLocalizer.j

@@ -40,7 +40,7 @@ var LocalizerStringsRegex = new RegExp("\"(.+)\"\\s*=\\s*\"(.+)\"\\s*;\\s*(//.+)
 
 - (void)reloadIfNeeded
 {
-    if (connection !== nil) // Connection waiting
+    if (connection != nil) // Connection waiting
     {
         connection = nil;
 
@@ -51,7 +51,7 @@ var LocalizerStringsRegex = new RegExp("\"(.+)\"\\s*=\\s*\"(.+)\"\\s*;\\s*(//.+)
 
 - (void)connection:(CPURLConnection)aConnection didReceiveData:(CPString)rawString
 {
-    if (connection !== nil && rawString !== nil)
+    if (connection != nil && rawString != nil)
         [self loadContent:rawString];
 
     connection = nil;
@@ -77,21 +77,251 @@ var LocalizerStringsRegex = new RegExp("\"(.+)\"\\s*=\\s*\"(.+)\"\\s*;\\s*(//.+)
     }
 
     _dictionary = [CPDictionary dictionaryWithDictionary:dict];
+
+    // Post notification to let the rule editor know the translation dictionary is ready
+    [[CPNotificationCenter defaultCenter] postNotificationName:@"_CPRuleEditorLocalizerDidLoadNotification" object:self];
 }
 
 - (CPString)localizedStringForString:(CPString)aString
 {
     [self reloadIfNeeded];
 
-    if (_dictionary !== nil && aString !== nil)
+    if (_dictionary != nil && aString != nil)
     {
         var localized = [_dictionary objectForKey:aString];
 
-        if (localized !== nil)
+        if (localized != nil)
             return localized;
     }
 
     return aString;
 }
 
+// MARK: - Formatting & Reordering Helpers
+
+- (CPString)_englishRepresentationForView:(id)aView
+{
+    if ([aView isKindOfClass:[CPPopUpButton class]])
+    {
+        var selectedItem = [aView selectedItem];
+        if (selectedItem)
+        {
+            var originalTitle = selectedItem._originalTitle;
+            
+            // Fallback: If not cached directly, inspect representedObject payload dictionary
+            if (!originalTitle)
+            {
+                var rep = [selectedItem representedObject];
+                if (rep && typeof rep === "object" && [rep respondsToSelector:@selector(objectForKey:)])
+                {
+                    originalTitle = [rep objectForKey:@"value"];
+                }
+                else if (rep && typeof rep === "string")
+                {
+                    originalTitle = rep;
+                }
+            }
+            if (!originalTitle)
+            {
+                originalTitle = [selectedItem title];
+            }
+            return "%[" + originalTitle + "]@";
+        }
+        return "%[]@";
+    }
+    else if ([aView isKindOfClass:[CPTextField class]] && ![aView isEditable])
+    {
+        return aView._originalText || [aView stringValue];
+    }
+    else
+    {
+        return "%@";
+    }
+}
+
+- (CPString)formattingKeyForViews:(CPArray)views
+{
+    var keyParts = [];
+    var count = [views count];
+    for (var i = 0; i < count; i++)
+    {
+        var view = [views objectAtIndex:i];
+        [keyParts addObject:[self _englishRepresentationForView:view]];
+    }
+    return [keyParts componentsJoinedByString:@" "];
+}
+
+- (void)localizeMenuItemsForViews:(CPArray)views
+{
+    var count = [views count];
+    for (var i = 0; i < count; i++)
+    {
+        var view = [views objectAtIndex:i];
+        if ([view isKindOfClass:[CPPopUpButton class]])
+        {
+            var menuItems = [view itemArray];
+            var menuItemsCount = [menuItems count];
+            var selectedItem = [view selectedItem];
+
+            for (var j = 0; j < menuItemsCount; j++)
+            {
+                var item = [menuItems objectAtIndex:j];
+                
+                if (!item._originalTitle)
+                {
+                    var rep = [item representedObject];
+                    if (rep && typeof rep === "object" && [rep respondsToSelector:@selector(objectForKey:)])
+                    {
+                        item._originalTitle = [rep objectForKey:@"value"];
+                    }
+                    else
+                    {
+                        item._originalTitle = [item title];
+                    }
+                }
+
+                // Temporarily select item to generate formatting key context
+                [view selectItem:item];
+
+                var tempKey = [self formattingKeyForViews:views];
+                var tempPattern = [self localizedStringForString:tempKey];
+
+                if (tempPattern !== tempKey)
+                {
+                    var regex = /%(\d+)\$(?:\[([^\]]+)\])?@/g;
+                    var match;
+                    while ((match = regex.exec(tempPattern)) !== null)
+                    {
+                        var position = parseInt(match[1], 10) - 1;
+                        var translatedValue = match[2];
+
+                        if (position === i && translatedValue)
+                        {
+                            [item setTitle:translatedValue];
+                            break;
+                        }
+                    }
+                }
+                else
+                {
+                    [item setTitle:item._originalTitle];
+                }
+            }
+
+            if (selectedItem)
+            {
+                [view selectItem:selectedItem];
+            }
+        }
+    }
+}
+
+- (CPArray)localizeAndReorderViews:(CPArray)views
+{
+    var key = [self formattingKeyForViews:views];
+    var localizedPattern = [self localizedStringForString:key];
+
+    if (localizedPattern === key)
+    {
+        var count = [views count];
+
+        for (var i = 0; i < count; i++)
+        {
+            var originalView = [views objectAtIndex:i];
+            if ([originalView isKindOfClass:[CPPopUpButton class]])
+            {
+                var selectedItem = [originalView selectedItem];
+                if (selectedItem && selectedItem._originalTitle)
+                {
+                    [selectedItem setTitle:selectedItem._originalTitle];
+                }
+            }
+            else if ([originalView respondsToSelector:@selector(setStringValue:)] && originalView._originalText)
+            {
+                [originalView setStringValue:originalView._originalText];
+                
+                if ([originalView isKindOfClass:[CPTextField class]] && ![originalView isEditable])
+                {
+                    var font = [originalView font] || [CPFont systemFontOfSize:[CPFont systemFontSize]],
+                        size = [originalView._originalText sizeWithFont:font];
+                    [originalView setFrameSize:CGSizeMake(size.width + 4, CGRectGetHeight([originalView frame]))];
+                }
+            }
+        }
+
+        return views;
+    }
+
+    var newViews = [CPMutableArray array];
+    var regex = /%(\d+)\$(?:\[([^\]]+)\])?@/g;
+    var lastIndex = 0;
+    var match;
+
+    while ((match = regex.exec(localizedPattern)) !== null)
+    {
+        var literalText = localizedPattern.substring(lastIndex, match.index);
+        
+        // Only add a label if there are actual non-whitespace characters (like 'y')
+        if (literalText.length > 0 && /\S/.test(literalText))
+        {
+            var label = [CPTextField labelWithTitle:literalText];
+            [newViews addObject:label];
+        }
+
+        var position = parseInt(match[1], 10) - 1;
+        var translatedValue = match[2];
+
+        if (position >= 0 && position < [views count])
+        {
+            var originalView = [views objectAtIndex:position];
+
+            if (translatedValue !== undefined && translatedValue !== null)
+            {
+                if ([originalView isKindOfClass:[CPPopUpButton class]])
+                {
+                    var selectedItem = [originalView selectedItem];
+                    if (selectedItem)
+                    {
+                        if (!selectedItem._originalTitle)
+                        {
+                            selectedItem._originalTitle = [selectedItem title];
+                        }
+                        [selectedItem setTitle:translatedValue];
+                    }
+                }
+                else if ([originalView respondsToSelector:@selector(setStringValue:)])
+                {
+                    [originalView setStringValue:translatedValue];
+
+                    // Recalculate frame size if it is a static CPTextField to avoid visual clipping
+                    if ([originalView isKindOfClass:[CPTextField class]] && ![originalView isEditable])
+                    {
+                        var font = [originalView font] || [CPFont systemFontOfSize:[CPFont systemFontSize]],
+                            size = [translatedValue sizeWithFont:font];
+                        [originalView setFrameSize:CGSizeMake(size.width + 4, CGRectGetHeight([originalView frame]))];
+                    }
+                }
+            }
+
+            [newViews addObject:originalView];
+        }
+
+        lastIndex = regex.lastIndex;
+    }
+
+    if (lastIndex < localizedPattern.length)
+    {
+        var literalText = localizedPattern.substring(lastIndex);
+        
+        // Only add a label if there are actual non-whitespace characters
+        if (literalText.length > 0 && /\S/.test(literalText))
+        {
+            var label = [CPTextField labelWithTitle:literalText];
+            [newViews addObject:label];
+        }
+    }
+
+    return newViews;
+}
+
 @end

AppKit/CPRuleEditor/_CPRuleEditorPopUpButton.j

@@ -1,203 +0,0 @@
-/*
- * Created by cacaodev@gmail.com.
- * Copyright (c) 2011 Pear, Inc. All rights reserved.
- *
- * This library is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 2.1 of the License, or (at your option) any later version.
- *
- * This library is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public
- * License along with this library; if not, write to the Free Software
- * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
- */
-
-@import "CPBezierPath.j"
-@import "CPPopUpButton.j"
-
-@class _CPRuleEditorViewSlice
-
-var GRADIENT_START_COLOR = "#fcfcfc",
-    GRADIENT_END_COLOR = "#dfdfdf",
-    BORDER_COLOR = "#BDBDBD";
-
-var GRADIENT_NORMAL,
-    GRADIENT_HIGHLIGHTED,
-    GRADIENT_PROPERTY;
-
-if (CPBrowserIsEngine(CPWebKitBrowserEngine))
-{
-    GRADIENT_NORMAL = "-webkit-gradient(linear, left top, left bottom, from(" + GRADIENT_START_COLOR + "), to(" + GRADIENT_END_COLOR + "))",
-    GRADIENT_HIGHLIGHTED = "-webkit-gradient(linear, left top, left bottom, from(" + GRADIENT_END_COLOR + "), to(" + GRADIENT_START_COLOR + "))";
-    GRADIENT_PROPERTY = "background";
-}
-else if (CPBrowserIsEngine(CPGeckoBrowserEngine))
-{
-    GRADIENT_NORMAL = "-moz-linear-gradient(top, " + GRADIENT_START_COLOR + ", " + GRADIENT_END_COLOR + ")",
-    GRADIENT_HIGHLIGHTED = "-moz-linear-gradient(top, " + GRADIENT_END_COLOR + ", " + GRADIENT_START_COLOR + ")";
-    GRADIENT_PROPERTY = "background";
-}
-else if (CPBrowserIsEngine(CPInternetExplorerBrowserEngine))
-{
-    GRADIENT_NORMAL = "progid:DXImageTransform.Microsoft.gradient(startColorstr='" + GRADIENT_START_COLOR + "', endColorstr='" + GRADIENT_END_COLOR + "')";
-    GRADIENT_HIGHLIGHTED = "progid:DXImageTransform.Microsoft.gradient(startColorstr='" + GRADIENT_END_COLOR + "', endColorstr='" + GRADIENT_START_COLOR + "')";
-    GRADIENT_PROPERTY = "filter";
-}else
-{
-    GRADIENT_NORMAL = GRADIENT_START_COLOR;
-    GRADIENT_HIGHLIGHTED = GRADIENT_END_COLOR;
-    GRADIENT_PROPERTY = "background";
-}
-
-@implementation _CPRuleEditorPopUpButton : CPPopUpButton
-{
-    CPInteger radius;
-}
-
-- (void)_sharedInit
-{
-    [self setBordered:NO];
-
-#if PLATFORM(DOM)
-    var style = _DOMElement.style;
-    style.border = "1px solid " + BORDER_COLOR;
-    style[GRADIENT_PROPERTY] = GRADIENT_NORMAL;
-#endif
-}
-
-- (id)initWithFrame:(CGRect)aFrame
-{
-    if (self = [super initWithFrame:aFrame])
-        [self _sharedInit];
-
-    return self;
-}
-
-- (id)initWithCoder:(CPCoder)aCoder
-{
-    self = [super initWithCoder:aCoder];
-    [self _sharedInit];
-
-    return self;
-}
-
-- (CPView)hitTest:(CGPoint)point
-{
-    if (!CGRectContainsPoint([self frame], point) || ![self sliceIsEditable])
-        return nil;
-
-    return self;
-}
-
-- (BOOL)sliceIsEditable
-{
-    var superview = [self superview];
-    return ![superview isKindOfClass:[_CPRuleEditorViewSlice]] || [superview isEditable];
-}
-
-- (void)trackMouse:(CPEvent)theEvent
-{
-    if (![self sliceIsEditable])
-        return;
-
-    [super trackMouse:theEvent];
-}
-
-- (CGRect)contentRectForBounds:(CGRect)bounds
-{
-    var contentRect = [super contentRectForBounds:bounds];
-    contentRect.origin.x += radius;
-    contentRect.size.width -= 2 * radius;
-
-    return contentRect;
-}
-
-- (void)layoutSubviews
-{
-#if PLATFORM(DOM)
-    radius = FLOOR(CGRectGetHeight([self bounds]) / 2);
-    var style = _DOMElement.style,
-        radiusCSS = radius + "px";
-
-    style.borderRadius = radiusCSS;
-#endif
-
-    [super layoutSubviews];
-}
-
-- (void)drawRect:(CGRect)aRect
-{
-    var context = [[CPGraphicsContext currentContext] graphicsPort],
-        bounds = [self bounds],
-        arrow_width = FLOOR(CGRectGetHeight(bounds) / 3.5);
-
-    CGContextTranslateCTM(context, CGRectGetWidth(bounds) - radius - arrow_width, CGRectGetHeight(bounds) / 2);
-
-    var arrowsPath = [CPBezierPath bezierPath];
-    [arrowsPath moveToPoint:CGPointMake(0, 1)];
-    [arrowsPath lineToPoint:CGPointMake(arrow_width, 1)];
-    [arrowsPath lineToPoint:CGPointMake(arrow_width / 2, arrow_width + 1)];
-    [arrowsPath closePath];
-
-    CGContextSetFillColor(context, [CPColor colorWithWhite:101 / 255 alpha:1]);
-    [arrowsPath fill];
-
-    CGContextScaleCTM(context, 1 , -1);
-    [arrowsPath fill];
-}
-
-@end
-
-@implementation _CPRuleEditorButton : CPButton
-{
-    CPInteger radius;
-}
-
-- (void)_sharedInit
-{
-    [self setBordered:NO];
-
-#if PLATFORM(DOM)
-    var style = _DOMElement.style;
-    style.border = "1px solid " + BORDER_COLOR;
-    style[GRADIENT_PROPERTY] = GRADIENT_NORMAL;
-#endif
-}
-
-- (id)initWithFrame:(CGRect)aFrame
-{
-    if (self = [super initWithFrame:aFrame])
-        [self _sharedInit];
-
-    return self;
-}
-
-- (id)initWithCoder:(CPCoder)aCoder
-{
-    self = [super initWithCoder:aCoder];
-    [self _sharedInit];
-
-    return self;
-}
-
-- (void)layoutSubviews
-{
-#if PLATFORM(DOM)
-    radius = FLOOR(CGRectGetHeight([self bounds]) / 2);
-
-    var style = _DOMElement.style,
-        radiusCSS = radius + "px";
-
-    style.borderRadius = radiusCSS;
-    style[GRADIENT_PROPERTY] = ([self isHighlighted]) ? GRADIENT_HIGHLIGHTED : GRADIENT_NORMAL;
-#endif
-
-    [super layoutSubviews];
-}
-
-@end

AppKit/CPRuleEditor/_CPRuleEditorViewSlice.j

@@ -19,6 +19,8 @@
 
 @import "CPView.j"
 
+@class CPRuleEditor
+
 @implementation _CPRuleEditorViewSlice : CPView
 {
     CPRuleEditor _ruleEditor;
@@ -27,7 +29,6 @@
     CGRect       _animationTargetRect   @accessors(property=_animationTargetRect);
     BOOL         _selected              @accessors(getter=_isSelected, setter=_setSelected:);
     BOOL         _lastSelected          @accessors(getter=_isLastSelected, setter=_setLastSelected:);
-    CPColor      _backgroundColor       @accessors(property=backgroundColor);
     BOOL         _editable              @accessors(getter=isEditable, setter=setEditable:);
 }
 
@@ -61,9 +62,9 @@
 - (void)drawRect:(CGRect)rect
 {
     var context = [[CPGraphicsContext currentContext] graphicsPort],
-        bounds = [self bounds],
-        maxX = CGRectGetWidth(bounds),
-        maxY = CGRectGetHeight(bounds);
+        bounds  = [self bounds],
+        maxX    = CGRectGetWidth(bounds),
+        maxY    = CGRectGetHeight(bounds);
 
     // Draw background
     if ([self _isSelected])

AppKit/CPRuleEditor/_CPRuleEditorViewSliceRow.j

@@ -19,24 +19,27 @@
 
 @import "CPRuleEditor_Constants.j"
 @import "_CPRuleEditorViewSlice.j"
-@import "_CPRuleEditorPopUpButton.j"
+
+@import "CPButton.j"
+@import "CPDatePicker.j"
+@import "CPPopUpButton.j"
 
 @global CPApp
-
-var CONTROL_HEIGHT = 16.,
-    BUTTON_HEIGHT = 16.;
+@global CPMiniControlSize
+@global CPSmallControlSize
 
 @implementation _CPRuleEditorViewSliceRow : _CPRuleEditorViewSlice
 {
-    CPMutableArray  _ruleOptionViews;
-    CPMutableArray  _ruleOptionFrames;
-    CPMutableArray  _correspondingRuleItems;
-    CPMutableArray  _ruleOptionInitialViewFrames;
-    CPButton        _addButton;
-    CPButton        _subtractButton;
+    CPButton                _addButton;
+    CPButton                _subtractButton;
+    CPMutableArray          _correspondingRuleItems;
+    CPMutableArray          _ruleOptionFrames;
+    CPMutableArray          _ruleOptionInitialViewFrames;
+    CPMutableArray          _ruleOptionViews;
 
-    CPRuleEditorRowType _rowType @accessors;
-    CPRuleEditorRowType _plusButtonRowType;
+
+    CPRuleEditorRowType     _rowType @accessors;
+    CPRuleEditorRowType     _plusButtonRowType;
 }
 
 - (id)initWithFrame:(CGRect)frame ruleEditorView:(id)editor
@@ -49,34 +52,33 @@ var CONTROL_HEIGHT = 16.,
 
 - (void)_initShared
 {
-    _correspondingRuleItems = [[CPMutableArray alloc] init];
-    _ruleOptionFrames = [[CPMutableArray alloc] init];
-    _ruleOptionInitialViewFrames = [[CPMutableArray alloc] init];
-    _ruleOptionViews = [[CPMutableArray alloc] init];
-     _editable = [_ruleEditor isEditable];
+    _correspondingRuleItems         = [[CPMutableArray alloc] init];
+    _ruleOptionFrames               = [[CPMutableArray alloc] init];
+    _ruleOptionInitialViewFrames    = [[CPMutableArray alloc] init];
+    _ruleOptionViews                = [[CPMutableArray alloc] init];
+    _editable                       = [_ruleEditor isEditable];
+
+    _addButton                      = [self _createAddRowButton];
+    _subtractButton                 = [self _createDeleteRowButton];
 
-    _addButton = [self _createAddRowButton];
-    _subtractButton = [self _createDeleteRowButton];
-    [_addButton setToolTip:[_ruleEditor _toolTipForAddSimpleRowButton]];
-    [_subtractButton setToolTip:[_ruleEditor _toolTipForDeleteRowButton]];
-    [_addButton setHidden:!_editable];
-    [_subtractButton setHidden:!_editable];
     [self addSubview:_addButton];
     [self addSubview:_subtractButton];
 
     [self setAutoresizingMask:CPViewWidthSizable];
-
-    var center = [CPNotificationCenter defaultCenter];
-    [center addObserver:self selector:@selector(_textDidChange:) name:CPControlTextDidChangeNotification object:nil];
 }
 
 - (CPButton)_createRowButton
 {
-    var button = [[_CPRuleEditorButton alloc] initWithFrame:CGRectMakeZero()];
-    [button setFont:[CPFont boldFontWithName:@"Apple Symbol" size:12.0]];
-    [button setTextColor:[CPColor colorWithWhite:150 / 255 alpha:1]];
+    var button = [[CPButton alloc] initWithFrame:CGRectMakeZero()];
+
+    [button setFont:[_ruleEditor font]];
+    [button setTextColor:[_ruleEditor _fontColor]];
+
     [button setAlignment:CPCenterTextAlignment];
     [button setAutoresizingMask:CPViewMinXMargin];
+    [button setButtonType:CPMomentaryChangeButton];
+    [button setBordered:NO];
+    [button setHidden:!_editable];
     [button setImagePosition:CPImageOnly];
 
     return button;
@@ -86,7 +88,10 @@ var CONTROL_HEIGHT = 16.,
 {
     var button = [self _createRowButton];
 
-    [button setImage:[_ruleEditor _addImage]];
+    [button setToolTip:[_ruleEditor _toolTipForAddSimpleRowButton]];
+    [button setValue:[_ruleEditor _imageAdd] forThemeAttribute:@"image" inState:CPThemeStateNormal];
+    [button setValue:[_ruleEditor _imageAddHighlighted] forThemeAttribute:@"image" inState:CPThemeStateHighlighted];
+
     [button setAction:@selector(_addOption:)];
     [button setTarget:self];
 
@@ -97,7 +102,10 @@ var CONTROL_HEIGHT = 16.,
 {
     var button = [self _createRowButton];
 
-    [button setImage:[_ruleEditor _removeImage]];
+    [button setToolTip:[_ruleEditor _toolTipForDeleteRowButton]];
+    [button setValue:[_ruleEditor _imageRemove] forThemeAttribute:@"image" inState:CPThemeStateNormal];
+    [button setValue:[_ruleEditor _imageRemoveHighlighted] forThemeAttribute:@"image" inState:CPThemeStateHighlighted];
+
     [button setAction:@selector(_deleteOption:)];
     [button setTarget:self];
 
@@ -106,21 +114,42 @@ var CONTROL_HEIGHT = 16.,
 
 - (CPMenuItem)_createMenuItemWithTitle:(CPString )title
 {
-    title = [[_ruleEditor standardLocalizer] localizedStringForString:title];
-    var mItem = [[CPMenuItem alloc] initWithTitle:title action:nil keyEquivalent:@""];
-    return mItem;
+    var originalTitle = title;
+    var localizedTitle = [[_ruleEditor standardLocalizer] localizedStringForString:title];
+    var item = [[CPMenuItem alloc] initWithTitle:localizedTitle action:nil keyEquivalent:@""];
+    
+    // Cache the raw English title for pattern-matching
+    item._originalTitle = originalTitle;
+    return item;
+}
+
+- (CPTextField)_createStaticTextFieldWithStringValue:(CPString)text
+{
+    var textField       = [[CPTextField alloc] initWithFrame:CGRectMakeZero()],
+        ruleEditorFont  = [_ruleEditor font],
+        font            = [CPFont fontWithName:[ruleEditorFont familyName] size:[ruleEditorFont size] + 2],
+        localizedText   = [[_ruleEditor standardLocalizer] localizedStringForString:text],
+        size            = [localizedText sizeWithFont:font];
+
+    [textField setFrameSize:CGSizeMake(size.width + 4, [_ruleEditor rowHeight])];
+    [textField setValue:font forThemeAttribute:@"font"];
+    [textField setValue:[_ruleEditor _verticalAlignment] forThemeAttribute:@"vertical-alignment"];
+    [textField setStringValue:localizedText];
+    
+    // Cache the raw English text for pattern-matching
+    textField._originalText = text;
+
+    return textField;
 }
 
 - (CPPopUpButton)_createPopUpButtonWithItems:(CPArray)itemsArray selectedItemIndex:(int)index
 {
-    var title = [[itemsArray objectAtIndex:index] title],
-        font = [_ruleEditor font],
-        width = [title sizeWithFont:font].width + 20,
-        rect = CGRectMake(0, 0, (width - width % 40) + 80, CONTROL_HEIGHT),
+    var title   = [[itemsArray objectAtIndex:index] title],
+        font    = [_ruleEditor font],
+        width   = [title sizeWithFont:font].width + 35, // 35 for right arrows + margins
+        rect    = CGRectMake(0, 0, width, [_ruleEditor rowHeight]),
+        popup   = [[CPPopUpButton alloc] initWithFrame:rect];
 
-        popup = [[_CPRuleEditorPopUpButton alloc] initWithFrame:rect];
-
-    [popup setTextColor:[CPColor colorWithWhite:101 / 255 alpha:1]];
     [popup setValue:font forThemeAttribute:@"font"];
 
     var count = [itemsArray count];
@@ -137,28 +166,13 @@ var CONTROL_HEIGHT = 16.,
     return [CPMenuItem separatorItem];
 }
 
-- (_CPRuleEditorTextField)_createStaticTextFieldWithStringValue:(CPString)text
-{
-    var textField = [[_CPRuleEditorTextField alloc] initWithFrame:CGRectMakeZero()],
-        ruleEditorFont = [_ruleEditor font],
-        font = [CPFont fontWithName:[ruleEditorFont familyName] size:[ruleEditorFont size] + 2],
-        localizedText = [[_ruleEditor standardLocalizer] localizedStringForString:text],
-        size = [localizedText sizeWithFont:font];
-
-    [textField setFrameSize:CGSizeMake(size.width + 4, CONTROL_HEIGHT + 2)];
-
-    [textField setValue:font forThemeAttribute:@"font"];
-    [textField setStringValue:localizedText];
-
-    return textField;
-}
-
 - (void)_addOption:(id)sender
 {
     if (_rowIndex == [_ruleEditor numberOfRows] - 1)
         [self setNeedsDisplay:YES];
 
     var type = _plusButtonRowType;
+
     if ([_ruleEditor nestingMode] == CPRuleEditorNestingModeCompound && ([[CPApp currentEvent] modifierFlags] & CPAlternateKeyMask))
         type = CPRuleEditorRowTypeCompound;
 
@@ -170,12 +184,12 @@ var CONTROL_HEIGHT = 16.,
     [_ruleEditor _deleteSlice:self];
 }
 
-- (void)_ruleOptionPopupChangedAction:(CPMenuItem )sender
+- (void)_ruleOptionPopupChangedAction:(CPMenuItem)sender
 {
-    var layoutdict = [sender representedObject],
-        newItem = [layoutdict objectForKey:@"item"],
+    var layoutdict      = [sender representedObject],
+        newItem         = [layoutdict objectForKey:@"item"],
         indexInCriteria = [layoutdict objectForKey:@"indexInCriteria"],
-        oldItem = [_correspondingRuleItems objectAtIndex:indexInCriteria];
+        oldItem         = [_correspondingRuleItems objectAtIndex:indexInCriteria];
 
     if (![newItem isEqual:oldItem])
     {
@@ -203,8 +217,7 @@ var CONTROL_HEIGHT = 16.,
 
 - (void)_reconfigureSubviews
 {
-    var ruleItems,
-        criteria,
+    var criteria,
         repObject,
         menuItem,
         ruleView,
@@ -307,8 +320,16 @@ var CONTROL_HEIGHT = 16.,
 
         if (ruleView != nil)
         {
+            [ruleView setControlSize:CPSmallControlSize];
+
+            var minSize = [ruleView currentValueForThemeAttribute:@"min-size"],
+                frame = [ruleView frame];
+
+            // Force controls to their minimum size
+            frame.size.height = minSize.height;
+            [ruleView setFrame:frame];
+
             [_ruleOptionViews addObject:ruleView];
-            var frame = [ruleView frame];
             [_ruleOptionInitialViewFrames addObject:frame];
             [_ruleOptionFrames addObject:frame];
 
@@ -321,6 +342,28 @@ var CONTROL_HEIGHT = 16.,
 
     [_correspondingRuleItems setArray:ruleItems];
 
+    // Localize drop-down options in context and reorder/insert intermediate labels natively
+    var localizer = [_ruleEditor standardLocalizer];
+    if (localizer)
+    {
+        [localizer localizeMenuItemsForViews:_ruleOptionViews];
+        _ruleOptionViews = [localizer localizeAndReorderViews:_ruleOptionViews];
+    }
+
+    // Rebuild frame configurations to match the new localized layout order
+    [_ruleOptionFrames removeAllObjects];
+    [_ruleOptionInitialViewFrames removeAllObjects];
+
+    var newCount = [_ruleOptionViews count];
+    for (var i = 0; i < newCount; i++)
+    {
+        var view = [_ruleOptionViews objectAtIndex:i],
+            frame = [view frame];
+
+        [_ruleOptionFrames addObject:frame];
+        [_ruleOptionInitialViewFrames addObject:frame];
+    }
+
     if (!_editable)
         [self _updateEnabledStateForSubviews];
 
@@ -331,8 +374,6 @@ var CONTROL_HEIGHT = 16.,
         var aView = [_ruleOptionViews objectAtIndex:firstResponderIndex];
         [[self window] makeFirstResponder:aView]; // This is not working. bug in CPPopUpButton firstResponder ?
     }
-
-    //[self setNeedsDisplay:YES];
 }
 
 - (void)_updateEnabledStateForSubviews
@@ -350,14 +391,16 @@ var CONTROL_HEIGHT = 16.,
     var optionViewOriginX,
         leftHorizontalPadding,
         leftButtonMinX,
-        rowHeight = [_ruleEditor rowHeight],
-        count = [_ruleOptionViews count],
-        sliceFrame = [self frame],
+        rowHeight   = [_ruleEditor rowHeight],
+        count       = [_ruleOptionViews count],
+        sliceFrame  = [self frame],
+        image       = [_ruleEditor _imageAdd],
+        imageSize   = image ? [image size] : CGSizeMake(0,0),
 
-        buttonFrame = CGRectMake(CGRectGetWidth(sliceFrame) - BUTTON_HEIGHT - [self _rowButtonsRightHorizontalPadding], ([_ruleEditor rowHeight] - BUTTON_HEIGHT) / 2 - 2, BUTTON_HEIGHT, BUTTON_HEIGHT);
+        buttonFrame = CGRectMake(CGRectGetWidth(sliceFrame) - imageSize.width - [self _rowButtonsRightHorizontalPadding], ([_ruleEditor rowHeight] - imageSize.height) / 2 - 1, imageSize.width, imageSize.height);
 
     [_addButton setFrame:buttonFrame];
-    buttonFrame.origin.x -= BUTTON_HEIGHT + [self _rowButtonsInterviewHorizontalPadding];
+    buttonFrame.origin.x -= imageSize.width + [self _rowButtonsInterviewHorizontalPadding];
     [_subtractButton setFrame:buttonFrame];
 
     if (widthChanged)
@@ -372,7 +415,8 @@ var CONTROL_HEIGHT = 16.,
         var ruleOptionView = _ruleOptionViews[i],
             optionFrame = _ruleOptionFrames[i];
 
-        optionFrame.origin.y = (rowHeight - CGRectGetHeight(optionFrame)) / 2 - 2;
+        // Use a pixel correction to align controls
+        optionFrame.origin.y = (rowHeight - CGRectGetHeight(optionFrame)) / 2;
 
         if (widthChanged)
         {
@@ -396,6 +440,9 @@ var CONTROL_HEIGHT = 16.,
 {
     [_addButton setHidden:[_ruleEditor _shouldHideAddButtonForSlice:self]];
     [_subtractButton setHidden:[_ruleEditor _shouldHideSubtractButtonForSlice:self]];
+
+    [_addButton setToolTip:[_ruleEditor _toolTipForAddSimpleRowButton]];
+    [_subtractButton setToolTip:[_ruleEditor _toolTipForDeleteRowButton]];
 }
 
 - (void)_configurePlusButtonByRowType:(CPRuleEditorRowType)type
@@ -481,6 +528,26 @@ var CONTROL_HEIGHT = 16.,
     [self layoutSubviews];
 }
 
+- (void)_addObservers
+{
+    if (_isObserving)
+        return;
+
+    [super _addObservers];
+
+    [[CPNotificationCenter defaultCenter] addObserver:self selector:@selector(_textDidChange:) name:CPControlTextDidChangeNotification object:nil];
+}
+
+- (void)_removeObservers
+{
+    if (!_isObserving)
+        return;
+
+    [super _removeObservers];
+
+    [[CPNotificationCenter defaultCenter] removeObserver:self name:CPControlTextDidChangeNotification object:nil];
+}
+
 - (void)drawRect:(CGRect)rect
 {
     [super drawRect:rect];
@@ -488,8 +555,9 @@ var CONTROL_HEIGHT = 16.,
 
 - (BOOL)_isRulePopup:(CPView)view
 {
-    if ([view isKindOfClass:[_CPRuleEditorPopUpButton class]])
+    if ([view isKindOfClass:[CPPopUpButton class]])
         return YES;
+
     return NO;
 }
 
@@ -506,28 +574,3 @@ var CONTROL_HEIGHT = 16.,
 }
 
 @end
-
-@implementation _CPRuleEditorTextField : CPTextField
-{
-}
-
-- (id)initWithFrame:(CGRect)frame
-{
-    self = [super initWithFrame:frame];
-    if (self)
-    {
-        [self setDrawsBackground:NO];
-    }
-
-    return self;
-}
-
-- (CPView)hitTest:(CGPoint)point
-{
-    if (!CGRectContainsPoint([self frame], point))
-        return nil;
-
-    return [self superview];
-}
-
-@end

AppKit/CPSavePanel.j

@@ -35,6 +35,11 @@
     CPArray _allowedFileTypes @accessors(property=allowedFileTypes);
 }
 
++ (CPURL)proposedFileURLWithDocumentName:(CPString)aDocumentName
+{
+    return [CPURL URLWithString:aDocumentName];
+}
+
 + (id)savePanel
 {
     return [[CPSavePanel alloc] init];

AppKit/CPScrollView.j

@@ -29,10 +29,23 @@
 @import "CPClipView.j"
 @import "CPScroller.j"
 @import "CPView.j"
+@import "CPRulerView.j"
+
+@class CPTableView
+@class CPRulerView
 
 #define SHOULD_SHOW_CORNER_VIEW() (_scrollerStyle === CPScrollerStyleLegacy && _verticalScroller && ![_verticalScroller isHidden])
 
 
+@protocol CPScrollViewDelegate <CPObject>
+
+@optional
+- (void)scrollViewWillScroll:(CPScrollView)aScrollView;
+- (void)scrollViewDidScroll:(CPScrollView)aScrollView;
+
+@end
+
+
 /*! @ignore */
 var _isBrowserUsingOverlayScrollers = function()
 {
@@ -77,6 +90,19 @@ var _isBrowserUsingOverlayScrollers = function()
 #endif
 };
 
+var TIMER_INTERVAL                              = 0.2,
+    CPScrollViewDelegate_scrollViewWillScroll_  = 1 << 0,
+    CPScrollViewDelegate_scrollViewDidScroll_   = 1 << 1,
+
+    CPScrollViewFadeOutTime                     = 1.3;
+
+var CPScrollViewWillStartLiveScrollNotification = @"CPScrollViewWillStartLiveScrollNotification",
+    CPScrollViewDidLiveScrollNotification       = @"CPScrollViewDidLiveScrollNotification",
+    CPScrollViewDidEndLiveScrollNotification    = @"CPScrollViewDidEndLiveScrollNotification";
+
+var CPScrollerStyleGlobal                       = CPScrollerStyleOverlay,
+    CPScrollerStyleGlobalChangeNotification     = @"CPScrollerStyleGlobalChangeNotification";
+
 /*!
     @ingroup appkit
     @class CPScrollView
@@ -85,53 +111,50 @@ var _isBrowserUsingOverlayScrollers = function()
     places scroll bars on the side of the view to allow the user to scroll and see the entire
     contents of the view.
 */
-
-var TIMER_INTERVAL                              = 0.2,
-    CPScrollViewDelegate_scrollViewWillScroll_  = 1 << 0,
-    CPScrollViewDelegate_scrollViewDidScroll_   = 1 << 1,
-
-    CPScrollViewFadeOutTime                     = 1.3;
-
-var CPScrollerStyleGlobal                       = CPScrollerStyleOverlay,
-    CPScrollerStyleGlobalChangeNotification     = @"CPScrollerStyleGlobalChangeNotification";
-
-
 @implementation CPScrollView : CPView
 {
-    CPClipView      _contentView;
-    CPClipView      _headerClipView;
-    CPView          _cornerView;
-    CPView          _bottomCornerView;
+    CPClipView                  _contentView;
+    CPClipView                  _headerClipView;
+    CPView                      _cornerView;
+    CPView                      _bottomCornerView;
 
-    id              _delegate;
-    CPTimer         _scrollTimer;
+    id <CPScrollViewDelegate>   _delegate;
+    CPTimer                     _scrollTimer;
 
-    BOOL            _hasVerticalScroller;
-    BOOL            _hasHorizontalScroller;
-    BOOL            _autohidesScrollers;
+    BOOL                        _hasVerticalScroller;
+    BOOL                        _hasHorizontalScroller;
+    BOOL                        _autohidesScrollers;
 
-    CPScroller      _verticalScroller;
-    CPScroller      _horizontalScroller;
+    CPScroller                  _verticalScroller;
+    CPScroller                  _horizontalScroller;
 
-    CPInteger       _recursionCount;
-    CPInteger       _implementedDelegateMethods;
+    CPInteger                   _recursionCount;
+    CPInteger                   _implementedDelegateMethods;
 
-    float           _verticalLineScroll;
-    float           _verticalPageScroll;
-    float           _horizontalLineScroll;
-    float           _horizontalPageScroll;
+    float                       _verticalLineScroll;
+    float                       _verticalPageScroll;
+    float                       _horizontalLineScroll;
+    float                       _horizontalPageScroll;
 
-    CPBorderType    _borderType;
+    CPBorderType                _borderType;
 
-    CPTimer         _timerScrollersHide;
+    CPTimer                     _timerScrollersHide;
 
-    int             _scrollerStyle;
-    int             _scrollerKnobStyle;
+    int                         _scrollerStyle;
+    int                         _scrollerKnobStyle;
+
+    // Ruler Support
+    BOOL                        _hasVerticalRuler;
+    BOOL                        _hasHorizontalRuler;
+    BOOL                        _rulersVisible;
+
+    CPRulerView                 _verticalRuler;
+    CPRulerView                 _horizontalRuler;
 }
 
 
-#pragma mark -
-#pragma mark Class methods
+// MARK: -
+// MARK: Class methods
 
 + (void)initialize
 {
@@ -140,7 +163,7 @@ var CPScrollerStyleGlobal                       = CPScrollerStyleOverlay,
 
     var globalValue = [[CPBundle mainBundle] objectForInfoDictionaryKey:@"CPScrollersGlobalStyle"];
 
-    if (globalValue === nil || globalValue === -1)
+    if (globalValue == nil || globalValue === -1)
         CPScrollerStyleGlobal = _isBrowserUsingOverlayScrollers() ? CPScrollerStyleOverlay : CPScrollerStyleLegacy
     else
         CPScrollerStyleGlobal = globalValue;
@@ -159,33 +182,65 @@ var CPScrollerStyleGlobal                       = CPScrollerStyleOverlay,
         };
 }
 
+/*! Deprecated
+ */
 + (CGSize)contentSizeForFrameSize:(CGSize)frameSize hasHorizontalScroller:(BOOL)hFlag hasVerticalScroller:(BOOL)vFlag borderType:(CPBorderType)borderType
 {
-    var bounds = [self _insetBounds:CGRectMake(0.0, 0.0, frameSize.width, frameSize.height) borderType:borderType],
-        scrollerWidth = [CPScroller scrollerWidth];
+    return [self contentSizeForFrameSize:frameSize
+                 horizontalScrollerClass:hFlag ? [CPScroller class] : nil
+                   verticalScrollerClass:vFlag ? [CPScroller class] : nil
+                              borderType:borderType
+                             controlSize:CPRegularControlSize
+                           scrollerStyle:CPScrollerStyleGlobal];
+}
 
-    if (hFlag)
-        bounds.size.height -= scrollerWidth;
++ (CGSize)contentSizeForFrameSize:(CGSize)frameSize
+          horizontalScrollerClass:(Class)horizontalScrollerClass
+            verticalScrollerClass:(Class)verticalScrollerClass
+                       borderType:(CPBorderType)borderType
+                      controlSize:(CPControlSize)controlSize
+                    scrollerStyle:(CPScrollerStyle)scrollerStyle
+{
+    var bounds = [self _insetBounds:CGRectMake(0.0, 0.0, frameSize.width, frameSize.height) borderType:borderType];
 
-    if (vFlag)
-        bounds.size.width -= scrollerWidth;
+    if (horizontalScrollerClass)
+        bounds.size.height -= [horizontalScrollerClass scrollerWidthInStyle:scrollerStyle];
+
+    if (verticalScrollerClass)
+        bounds.size.width -= [verticalScrollerClass scrollerWidthForControlSize:scrollerStyle];
 
     return bounds.size;
 }
 
+/*! Deprecated
+ */
 + (CGSize)frameSizeForContentSize:(CGSize)contentSize hasHorizontalScroller:(BOOL)hFlag hasVerticalScroller:(BOOL)vFlag borderType:(CPBorderType)borderType
+{
+    return [self frameSizeForContentSize:contentSize
+                 horizontalScrollerClass:hFlag ? [CPScroller class] : nil
+                   verticalScrollerClass:vFlag ? [CPScroller class] : nil
+                              borderType:borderType
+                             controlSize:CPRegularControlSize
+                           scrollerStyle:CPScrollerStyleGlobal];
+}
+
++ (CGSize)frameSizeForContentSize:(CGSize)contentSize
+          horizontalScrollerClass:(Class)horizontalScrollerClass
+            verticalScrollerClass:(Class)verticalScrollerClass
+                       borderType:(CPBorderType)borderType
+                      controlSize:(CPControlSize)controlSize
+                    scrollerStyle:(CPScrollerStyle)scrollerStyle
 {
     var bounds = [self _insetBounds:CGRectMake(0.0, 0.0, contentSize.width, contentSize.height) borderType:borderType],
         widthInset = contentSize.width - bounds.size.width,
         heightInset = contentSize.height - bounds.size.height,
-        frameSize = CGSizeMake(contentSize.width + widthInset, contentSize.height + heightInset),
-        scrollerWidth = [CPScroller scrollerWidth];
+        frameSize = CGSizeMake(contentSize.width + widthInset, contentSize.height + heightInset);
 
     if (hFlag)
-        frameSize.height += scrollerWidth;
+        frameSize.height += [horizontalScrollerClass scrollerWidthInStyle:scrollerStyle];
 
     if (vFlag)
-        frameSize.width += scrollerWidth;
+        frameSize.width += [verticalScrollerClass scrollerWidthForControlSize:scrollerStyle];
 
     return frameSize;
 }
@@ -213,7 +268,7 @@ var CPScrollerStyleGlobal                       = CPScrollerStyleOverlay,
 /*!
     Get the system wide scroller style.
 */
-+ (int)globalScrollerStyle
++ (CPScrollerStyle)globalScrollerStyle
 {
     return CPScrollerStyleGlobal;
 }
@@ -223,15 +278,15 @@ var CPScrollerStyleGlobal                       = CPScrollerStyleOverlay,
 
     @param aStyle the scroller style to set all scroller views to use (CPScrollerStyleLegacy or CPScrollerStyleOverlay)
 */
-+ (void)setGlobalScrollerStyle:(int)aStyle
++ (void)setGlobalScrollerStyle:(CPScrollerStyle)aStyle
 {
     CPScrollerStyleGlobal = aStyle;
     [[CPNotificationCenter defaultCenter] postNotificationName:CPScrollerStyleGlobalChangeNotification object:nil];
 }
 
 
-#pragma mark -
-#pragma mark Initialization
+// MARK: -
+// MARK: Initialization
 
 - (id)initWithFrame:(CGRect)aFrame
 {
@@ -261,22 +316,21 @@ var CPScrollerStyleGlobal                       = CPScrollerStyleOverlay,
         _scrollerKnobStyle = CPScrollerKnobStyleDefault;
         [self setScrollerStyle:CPScrollerStyleGlobal];
 
+        _hasVerticalRuler = NO;
+        _hasHorizontalRuler = NO;
+        _rulersVisible = NO;
+
         _delegate = nil;
         _scrollTimer = nil;
         _implementedDelegateMethods = 0;
-
-        [[CPNotificationCenter defaultCenter] addObserver:self
-                                 selector:@selector(_didReceiveDefaultStyleChange:)
-                                     name:CPScrollerStyleGlobalChangeNotification
-                                   object:nil];
     }
 
     return self;
 }
 
 
-#pragma mark -
-#pragma mark Getters / Setters
+// MARK: -
+// MARK: Getters / Setters
 
 /*!
     The delegate of the scroll view
@@ -301,7 +355,7 @@ Notifies the delegate when the scroll view has finished scrolling.
 @endcode
 
 */
-- (void)setDelegate:(id)aDelegate
+- (void)setDelegate:(id <CPScrollViewDelegate>)aDelegate
 {
     if (aDelegate === _delegate)
         return;
@@ -309,7 +363,7 @@ Notifies the delegate when the scroll view has finished scrolling.
     _delegate = aDelegate;
     _implementedDelegateMethods = 0;
 
-    if (_delegate === nil)
+    if (_delegate == nil)
         return;
 
     if ([_delegate respondsToSelector:@selector(scrollViewWillScroll:)])
@@ -319,7 +373,7 @@ Notifies the delegate when the scroll view has finished scrolling.
         _implementedDelegateMethods |= CPScrollViewDelegate_scrollViewDidScroll_;
 }
 
-- (int)scrollerStyle
+- (CPScrollerStyle)scrollerStyle
 {
     return _scrollerStyle;
 }
@@ -330,7 +384,7 @@ Notifies the delegate when the scroll view has finished scrolling.
     - CPScrollerStyleLegacy: Standard scrollers like Windows or Mac OS X prior to 10.7
     - CPScrollerStyleOverlay: scrollers like those in Mac OS X 10.7+
 */
-- (void)setScrollerStyle:(int)aStyle
+- (void)setScrollerStyle:(CPScrollerStyle)aStyle
 {
     if (_scrollerStyle === aStyle)
         return;
@@ -527,8 +581,8 @@ Notifies the delegate when the scroll view has finished scrolling.
     {
         var bounds = [self _insetBounds];
 
-        [self setHorizontalScroller:[[CPScroller alloc] initWithFrame:CGRectMake(0.0, 0.0, MAX(CGRectGetWidth(bounds), [CPScroller scrollerWidthInStyle:_scrollerStyle] + 1), [CPScroller scrollerWidthInStyle:_scrollerStyle])]];
-        [[self horizontalScroller] setFrameSize:CGSizeMake(CGRectGetWidth(bounds), [CPScroller scrollerWidthInStyle:_scrollerStyle])];
+        [self setHorizontalScroller:[[CPScroller alloc] initWithFrame:CGRectMake(0.0, 0.0, MAX(CGRectGetWidth(bounds), [_horizontalScroller scrollerWidth] + 1), [_horizontalScroller scrollerWidth])]];
+        [[self horizontalScroller] setFrameSize:CGSizeMake(CGRectGetWidth(bounds), [_horizontalScroller scrollerWidth])];
     }
 
     [self reflectScrolledClipView:_contentView];
@@ -592,8 +646,8 @@ Notifies the delegate when the scroll view has finished scrolling.
     {
         var bounds = [self _insetBounds];
 
-        [self setVerticalScroller:[[CPScroller alloc] initWithFrame:CGRectMake(0.0, 0.0, [CPScroller scrollerWidthInStyle:_scrollerStyle], MAX(CGRectGetHeight(bounds), [CPScroller scrollerWidthInStyle:_scrollerStyle] + 1))]];
-        [[self verticalScroller] setFrameSize:CGSizeMake([CPScroller scrollerWidthInStyle:_scrollerStyle], CGRectGetHeight(bounds))];
+        [self setVerticalScroller:[[CPScroller alloc] initWithFrame:CGRectMake(0.0, 0.0, [_verticalScroller scrollerWidth], MAX(CGRectGetHeight(bounds), [_verticalScroller scrollerWidth] + 1))]];
+        [[self verticalScroller] setFrameSize:CGSizeMake([_verticalScroller scrollerWidth], CGRectGetHeight(bounds))];
     }
 
     [self reflectScrolledClipView:_contentView];
@@ -754,8 +808,105 @@ Notifies the delegate when the scroll view has finished scrolling.
 }
 
 
-#pragma mark -
-#pragma mark Privates
+// MARK: -
+// MARK: Rulers
+
+- (BOOL)hasHorizontalRuler
+{
+    return _hasHorizontalRuler;
+}
+
+- (void)setHasHorizontalRuler:(BOOL)shouldHaveHorizontalRuler
+{
+    if (_hasHorizontalRuler === shouldHaveHorizontalRuler)
+        return;
+
+    _hasHorizontalRuler = shouldHaveHorizontalRuler;
+
+    if (_hasHorizontalRuler && !_horizontalRuler)
+    {
+        _horizontalRuler = [[CPRulerView alloc] initWithScrollView:self orientation:CPRulerOrientationHorizontal];
+    }
+
+    [self tile];
+}
+
+- (BOOL)hasVerticalRuler
+{
+    return _hasVerticalRuler;
+}
+
+- (void)setHasVerticalRuler:(BOOL)shouldHaveVerticalRuler
+{
+    if (_hasVerticalRuler === shouldHaveVerticalRuler)
+        return;
+
+    _hasVerticalRuler = shouldHaveVerticalRuler;
+
+    if (_hasVerticalRuler && !_verticalRuler)
+    {
+        _verticalRuler = [[CPRulerView alloc] initWithScrollView:self orientation:CPRulerOrientationVertical];
+    }
+
+    [self tile];
+}
+
+- (BOOL)rulersVisible
+{
+    return _rulersVisible;
+}
+
+- (void)setRulersVisible:(BOOL)areRulersVisible
+{
+    if (_rulersVisible === areRulersVisible)
+        return;
+
+    _rulersVisible = areRulersVisible;
+
+    [self tile];
+}
+
+- (CPRulerView)horizontalRulerView
+{
+    return _horizontalRuler;
+}
+
+- (void)setHorizontalRulerView:(CPRulerView)aRulerView
+{
+    if (_horizontalRuler === aRulerView)
+        return;
+
+    [_horizontalRuler removeFromSuperview];
+    _horizontalRuler = aRulerView;
+
+    if (_horizontalRuler)
+        [self addSubview:_horizontalRuler];
+
+    [self tile];
+}
+
+- (CPRulerView)verticalRulerView
+{
+    return _verticalRuler;
+}
+
+- (void)setVerticalRulerView:(CPRulerView)aRulerView
+{
+    if (_verticalRuler === aRulerView)
+        return;
+
+    [_verticalRuler removeFromSuperview];
+    _verticalRuler = aRulerView;
+
+    if (_verticalRuler)
+        [self addSubview:_verticalRuler];
+
+    [self tile];
+}
+
+
+// MARK: -
+// MARK: Privates
 
 /* @ignore */
 - (void)_updateScrollerStyle
@@ -909,8 +1060,8 @@ Notifies the delegate when the scroll view has finished scrolling.
 
     bottomCornerFrame.origin.x = CGRectGetMinX(verticalFrame);
     bottomCornerFrame.origin.y = CGRectGetMaxY(verticalFrame);
-    bottomCornerFrame.size.width = [CPScroller scrollerWidthInStyle:_scrollerStyle];
-    bottomCornerFrame.size.height = [CPScroller scrollerWidthInStyle:_scrollerStyle];
+    bottomCornerFrame.size.width = [_verticalScroller scrollerWidth];
+    bottomCornerFrame.size.height = [_horizontalScroller scrollerWidth];
 
     return bottomCornerFrame;
 }
@@ -951,6 +1102,8 @@ Notifies the delegate when the scroll view has finished scrolling.
     [self _sendDelegateMessages];
 
     [_contentView scrollToPoint:contentBounds.origin];
+
+    [[CPNotificationCenter defaultCenter] postNotificationName:CPScrollViewDidLiveScrollNotification object:self];
 }
 
 /* @ignore */
@@ -989,6 +1142,8 @@ Notifies the delegate when the scroll view has finished scrolling.
 
     [_contentView scrollToPoint:contentBounds.origin];
     [_headerClipView scrollToPoint:CGPointMake(contentBounds.origin.x, 0.0)];
+
+    [[CPNotificationCenter defaultCenter] postNotificationName:CPScrollViewDidLiveScrollNotification object:self];
 }
 
 /* @ignore */
@@ -999,6 +1154,7 @@ Notifies the delegate when the scroll view has finished scrolling.
 
     if (!_scrollTimer)
     {
+        [[CPNotificationCenter defaultCenter] postNotificationName:CPScrollViewWillStartLiveScrollNotification object:self];
         [self _scrollViewWillScroll];
         _scrollTimer = [CPTimer scheduledTimerWithTimeInterval:TIMER_INTERVAL target:self selector:@selector(_scrollViewDidScroll) userInfo:nil repeats:YES];
     }
@@ -1037,6 +1193,8 @@ Notifies the delegate when the scroll view has finished scrolling.
     [_contentView scrollToPoint:constrainedOrigin];
     [_headerClipView scrollToPoint:CGPointMake(constrainedOrigin.x, 0.0)];
 
+    [[CPNotificationCenter defaultCenter] postNotificationName:CPScrollViewDidLiveScrollNotification object:self];
+
     if (extraX || extraY)
         [enclosingScrollView _respondToScrollWheelEventWithDeltaX:extraX deltaY:extraY];
 }
@@ -1056,6 +1214,8 @@ Notifies the delegate when the scroll view has finished scrolling.
 
     if (_implementedDelegateMethods & CPScrollViewDelegate_scrollViewDidScroll_)
         [_delegate scrollViewDidScroll:self];
+    
+    [[CPNotificationCenter defaultCenter] postNotificationName:CPScrollViewDidEndLiveScrollNotification object:self];
 }
 
 /*! @ignore*/
@@ -1066,18 +1226,15 @@ Notifies the delegate when the scroll view has finished scrolling.
 
 
 
-#pragma mark -
-#pragma mark Utilities
+// MARK: -
+// MARK: Utilities
 
 /*!
     Lays out the scroll view's components.
 */
 - (void)tile
 {
-    // yuck.
-    // RESIZE: tile->setHidden AND refl
-    // Outside Change: refl->tile->setHidden AND refl
-    // scroll: refl.
+    [self reflectScrolledClipView:_contentView];
 }
 
 /*!
@@ -1121,9 +1278,44 @@ Notifies the delegate when the scroll view has finished scrolling.
     contentFrame.origin.y += headerClipViewHeight;
     contentFrame.size.height -= headerClipViewHeight;
 
+    // Adjust content view based on horizontal / vertical ruler presence
+    var showHorizontalRuler = _rulersVisible && _hasHorizontalRuler && _horizontalRuler,
+        showVerticalRuler = _rulersVisible && _hasVerticalRuler && _verticalRuler;
+
+    var horizRulerThickness = showHorizontalRuler ? ([_horizontalRuler respondsToSelector:@selector(ruleThickness)] ? [_horizontalRuler ruleThickness] : 16.0) : 0.0,
+        vertRulerThickness = showVerticalRuler ? ([_verticalRuler respondsToSelector:@selector(ruleThickness)] ? [_verticalRuler ruleThickness] : 24.0) : 0.0;
+
+    if (showHorizontalRuler)
+    {
+        if ([_horizontalRuler superview] !== self)
+            [self addSubview:_horizontalRuler];
+        [_horizontalRuler setHidden:NO];
+    }
+    else if (_horizontalRuler)
+    {
+        [_horizontalRuler setHidden:YES];
+    }
+
+    if (showVerticalRuler)
+    {
+        if ([_verticalRuler superview] !== self)
+            [self addSubview:_verticalRuler];
+        [_verticalRuler setHidden:NO];
+    }
+    else if (_verticalRuler)
+    {
+        [_verticalRuler setHidden:YES];
+    }
+
+    contentFrame.origin.y += horizRulerThickness;
+    contentFrame.size.height -= horizRulerThickness;
+
+    contentFrame.origin.x += vertRulerThickness;
+    contentFrame.size.width -= vertRulerThickness;
+
     var difference = CGSizeMake(CGRectGetWidth(documentFrame) - CGRectGetWidth(contentFrame), CGRectGetHeight(documentFrame) - CGRectGetHeight(contentFrame)),
-        verticalScrollerWidth = [CPScroller scrollerWidthInStyle:[_verticalScroller style]],
-        horizontalScrollerHeight = [CPScroller scrollerWidthInStyle:[_horizontalScroller style]],
+        verticalScrollerWidth = [_verticalScroller scrollerWidth],
+        horizontalScrollerHeight = [_horizontalScroller scrollerWidth],
         hasVerticalScroll = difference.height > 0.0,
         hasHorizontalScroll = difference.width > 0.0,
         shouldShowVerticalScroller = _hasVerticalScroller && (!_autohidesScrollers || hasVerticalScroll),
@@ -1213,6 +1405,7 @@ Notifies the delegate when the scroll view has finished scrolling.
     [_contentView setFrame:contentFrame];
     [_headerClipView setFrame:[self _headerClipViewFrame]];
     [[_headerClipView documentView] setNeedsDisplay:YES];
+    
     if (SHOULD_SHOW_CORNER_VIEW())
     {
         [_cornerView setFrame:[self _cornerViewFrame]];
@@ -1227,6 +1420,37 @@ Notifies the delegate when the scroll view has finished scrolling.
         [[self bottomCornerView] setBackgroundColor:[self currentValueForThemeAttribute:@"bottom-corner-color"]];
     }
 
+    // Position and redraw rulers to track viewport updates
+    if (showHorizontalRuler)
+    {
+        [_horizontalRuler setFrame:CGRectMake(
+            CGRectGetMinX(contentFrame), 
+            CGRectGetMinY(contentFrame) - horizRulerThickness, 
+            CGRectGetWidth(contentFrame), 
+            horizRulerThickness
+        )];
+        
+        if ([_horizontalRuler respondsToSelector:@selector(updateRuler)])
+            [_horizontalRuler updateRuler];
+        else
+            [_horizontalRuler setNeedsDisplay:YES];
+    }
+
+    if (showVerticalRuler)
+    {
+        [_verticalRuler setFrame:CGRectMake(
+            CGRectGetMinX(contentFrame) - vertRulerThickness, 
+            CGRectGetMinY(contentFrame), 
+            vertRulerThickness, 
+            CGRectGetHeight(contentFrame)
+        )];
+        
+        if ([_verticalRuler respondsToSelector:@selector(updateRuler)])
+            [_verticalRuler updateRuler];
+        else
+            [_verticalRuler setNeedsDisplay:YES];
+    }
+
     --_recursionCount;
 }
 
@@ -1251,7 +1475,7 @@ Notifies the delegate when the scroll view has finished scrolling.
     }
 
     if (_timerScrollersHide)
-        [_timerScrollersHide invalidate]
+        [_timerScrollersHide invalidate];
 
     _timerScrollersHide = [CPTimer scheduledTimerWithTimeInterval:CPScrollViewFadeOutTime target:self selector:@selector(_hideScrollers:) userInfo:nil repeats:NO];
 }
@@ -1262,9 +1486,44 @@ Notifies the delegate when the scroll view has finished scrolling.
     [self reflectScrolledClipView:_contentView];
 }
 
+- (CGRect)documentVisibleRect
+{
+    return [_contentView documentVisibleRect];
+}
+
+// MARK: -
+// MARK: Overrides
+
+
+- (void)_removeObservers
+{
+    if (!_isObserving)
+        return;
+
+    [[CPNotificationCenter defaultCenter] removeObserver:self
+                                                    name:CPScrollerStyleGlobalChangeNotification
+                                                  object:nil];
+
+    [super _removeObservers];
+}
+
+- (void)_addObservers
+{
+    if (_isObserving)
+        return;
+
+    //Make sure to have the last global style for the scroller
+    [self _didReceiveDefaultStyleChange:nil];
+
+    [[CPNotificationCenter defaultCenter] addObserver:self
+                                             selector:@selector(_didReceiveDefaultStyleChange:)
+                                                 name:CPScrollerStyleGlobalChangeNotification
+                                               object:nil];
+
+    [super _addObservers];
+}
+
 
-#pragma mark -
-#pragma mark Overrides
 
 - (void)drawRect:(CGRect)aRect
 {
@@ -1354,8 +1613,8 @@ Notifies the delegate when the scroll view has finished scrolling.
 
     y = maxY - 1.5;
 
-    CGContextMoveToPoint(context, maxX - 1.0, y);
-    CGContextAddLineToPoint(context, minX + 2.0, y);
+    CGContextMoveToPoint(maxX - 1.0, y);
+    CGContextAddLineToPoint(minX + 2.0, y);
 
     x = minX + 0.5;
 
@@ -1399,7 +1658,16 @@ Notifies the delegate when the scroll view has finished scrolling.
     if (![_horizontalScroller isHidden] || ![_verticalScroller isHidden])
         _timerScrollersHide = [CPTimer scheduledTimerWithTimeInterval:CPScrollViewFadeOutTime target:self selector:@selector(_hideScrollers:) userInfo:nil repeats:NO];
 
-    [self _respondToScrollWheelEventWithDeltaX:[anEvent deltaX] deltaY:[anEvent deltaY]];
+    var deltaX = [anEvent scrollingDeltaX],
+        deltaY = [anEvent scrollingDeltaY];
+
+    if (![anEvent hasPreciseScrollingDeltas])
+    {
+        deltaX *= (_horizontalLineScroll || 1.0);
+        deltaY *= (_verticalLineScroll || 1.0);
+    }
+
+    [self _respondToScrollWheelEventWithDeltaX:deltaX deltaY:deltaY];
 }
 
 - (void)scrollPageUp:(id)sender
@@ -1464,6 +1732,51 @@ Notifies the delegate when the scroll view has finished scrolling.
 
 @end
 
+// MARK: -
+
+@implementation CPScrollView (FirstResponder)
+
+// Those 4 next methods are needed to (un)set CPThemeStateFirstResponder based on content view
+
+- (void)viewWillMoveToWindow:(CPWindow)aWindow
+{
+    [super viewWillMoveToWindow:aWindow];
+
+    [self _stopObservingFirstResponderForWindow:[self window]];
+
+    if (aWindow)
+        [self _startObservingFirstResponderForWindow:aWindow];
+}
+
+- (void)_startObservingFirstResponderForWindow:(CPWindow)aWindow
+{
+    [[CPNotificationCenter defaultCenter] addObserver:self selector:@selector(_firstResponderDidChange:) name:_CPWindowDidChangeFirstResponderNotification object:aWindow];
+}
+
+- (void)_stopObservingFirstResponderForWindow:(CPWindow)aWindow
+{
+    [[CPNotificationCenter defaultCenter] removeObserver:self name:_CPWindowDidChangeFirstResponderNotification object:aWindow];
+}
+
+- (void)_firstResponderDidChange:(CPNotification)aNotification
+{
+    var responder = [[self window] firstResponder],
+        // FIXME: We add focus ring only on table views right now. When focus ring management will be added, this must be adapted.
+        shouldAddFocusRing = [responder isKindOfClass:[CPTableView class]],
+        found;
+
+    while (!(found = (responder === self)) && responder)
+        responder = [responder superview];
+
+    if (found && shouldAddFocusRing)
+        [self setThemeState:CPThemeStateFirstResponder];
+    else
+        [self unsetThemeState:CPThemeStateFirstResponder];
+}
+
+@end
+
+// MARK: -
 
 var CPScrollViewContentViewKey          = @"CPScrollViewContentView",
     CPScrollViewHeaderClipViewKey       = @"CPScrollViewHeaderClipViewKey",
@@ -1480,7 +1793,14 @@ var CPScrollViewContentViewKey          = @"CPScrollViewContentView",
     CPScrollViewBottomCornerViewKey     = @"CPScrollViewBottomCornerViewKey",
     CPScrollViewBorderTypeKey           = @"CPScrollViewBorderTypeKey",
     CPScrollViewScrollerStyleKey        = @"CPScrollViewScrollerStyleKey",
-    CPScrollViewScrollerKnobStyleKey    = @"CPScrollViewScrollerKnobStyleKey";
+    CPScrollViewScrollerKnobStyleKey    = @"CPScrollViewScrollerKnobStyleKey",
+
+    // Ruler Coding Keys
+    CPScrollViewHasVRulerKey            = @"CPScrollViewHasVRuler",
+    CPScrollViewHasHRulerKey            = @"CPScrollViewHasHRuler",
+    CPScrollViewRulersVisibleKey        = @"CPScrollViewRulersVisible",
+    CPScrollViewVRulerKey               = @"CPScrollViewVRuler",
+    CPScrollViewHRulerKey               = @"CPScrollViewHRuler";
 
 @implementation CPScrollView (CPCoding)
 
@@ -1515,6 +1835,14 @@ var CPScrollViewContentViewKey          = @"CPScrollViewContentView",
         _cornerView             = [aCoder decodeObjectForKey:CPScrollViewCornerViewKey];
         _bottomCornerView       = [aCoder decodeObjectForKey:CPScrollViewBottomCornerViewKey];
 
+        // Ruler decoding
+        _hasVerticalRuler       = [aCoder decodeBoolForKey:CPScrollViewHasVRulerKey];
+        _hasHorizontalRuler     = [aCoder decodeBoolForKey:CPScrollViewHasHRulerKey];
+        _rulersVisible          = [aCoder decodeBoolForKey:CPScrollViewRulersVisibleKey];
+
+        _verticalRuler          = [aCoder decodeObjectForKey:CPScrollViewVRulerKey];
+        _horizontalRuler        = [aCoder decodeObjectForKey:CPScrollViewHRulerKey];
+
         _delegate = nil;
         _scrollTimer = nil;
         _implementedDelegateMethods = 0;
@@ -1536,6 +1864,8 @@ var CPScrollViewContentViewKey          = @"CPScrollViewContentView",
 */
 - (void)awakeFromCib
 {
+    [super awakeFromCib];
+
     [self _updateScrollerStyle];
     [self _updateCornerAndHeaderView];
 }
@@ -1566,6 +1896,14 @@ var CPScrollViewContentViewKey          = @"CPScrollViewContentView",
 
     [aCoder encodeInt:_scrollerStyle            forKey:CPScrollViewScrollerStyleKey];
     [aCoder encodeInt:_scrollerKnobStyle        forKey:CPScrollViewScrollerKnobStyleKey];
+
+    // Ruler encoding
+    [aCoder encodeBool:_hasVerticalRuler        forKey:CPScrollViewHasVRulerKey];
+    [aCoder encodeBool:_hasHorizontalRuler      forKey:CPScrollViewHasHRulerKey];
+    [aCoder encodeBool:_rulersVisible           forKey:CPScrollViewRulersVisibleKey];
+
+    [aCoder encodeObject:_verticalRuler         forKey:CPScrollViewVRulerKey];
+    [aCoder encodeObject:_horizontalRuler       forKey:CPScrollViewHRulerKey];
 }
 
 @end

AppKit/CPScroller.j

@@ -23,16 +23,16 @@
  * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
  */
 
-#include "../Foundation/Foundation.h"
 
 @import "CPAnimation.j"
 @import "CPControl.j"
-@import "CPWindow_Constants.j"
 @import "CPViewAnimation.j"
+@import "CPWindow_Constants.j"
 
 @global CPApp
 
 // CPScroller Constants
+@typedef CPScrollerPart
 CPScrollerNoPart            = 0;
 CPScrollerDecrementPage     = 1;
 CPScrollerKnob              = 2;
@@ -44,15 +44,11 @@ CPScrollerKnobSlot          = 6;
 CPScrollerIncrementArrow    = 0;
 CPScrollerDecrementArrow    = 1;
 
+@typedef CPUsableScrollerParts
 CPNoScrollerParts           = 0;
 CPOnlyScrollerArrows        = 1;
 CPAllScrollerParts          = 2;
 
-/*!
-    @ingroup appkit
-    @class CPScroller
-*/
-
 var PARTS_ARRANGEMENT   = [CPScrollerKnobSlot, CPScrollerDecrementLine, CPScrollerIncrementLine, CPScrollerKnob],
     NAMES_FOR_PARTS     = {},
     PARTS_FOR_NAMES     = {};
@@ -65,6 +61,7 @@ NAMES_FOR_PARTS[CPScrollerKnobSlot]         = @"knob-slot";
 NAMES_FOR_PARTS[CPScrollerKnob]             = @"knob";
 
 
+@typedef CPScrollerStyle
 CPScrollerStyleLegacy           = 0;
 CPScrollerStyleOverlay          = 1;
 
@@ -76,9 +73,13 @@ CPThemeStateScrollViewLegacy    = CPThemeState("scroller-style-legacy");
 CPThemeStateScrollerKnobLight   = CPThemeState("scroller-knob-light");
 CPThemeStateScrollerKnobDark    = CPThemeState("scroller-knob-dark");
 
+/*!
+    @ingroup appkit
+    @class CPScroller
+*/
+
 @implementation CPScroller : CPControl
 {
-    CPControlSize           _controlSize;
     CPUsableScrollerParts   _usableParts;
     CPArray                 _partRects;
 
@@ -100,8 +101,8 @@ CPThemeStateScrollerKnobDark    = CPThemeState("scroller-knob-dark");
 }
 
 
-#pragma mark -
-#pragma mark Class methods
+// MARK: -
+// MARK: Class methods
 
 + (CPString)defaultThemeClass
 {
@@ -133,7 +134,7 @@ CPThemeStateScrollerKnobDark    = CPThemeState("scroller-knob-dark");
 /*!
     Returns the CPScroller's width for a CPRegularControlSize.
 */
-+ (float)scrollerWidthInStyle:(int)aStyle
++ (float)scrollerWidthInStyle:(CPScrollerStyle)aStyle
 {
     if (!_CACHED_THEME_SCROLLER)
         _CACHED_THEME_SCROLLER = [[self alloc] init];
@@ -165,14 +166,13 @@ CPThemeStateScrollerKnobDark    = CPThemeState("scroller-knob-dark");
 }
 
 
-#pragma mark -
-#pragma mark Initialization
+// MARK: -
+// MARK: Initialization
 
 - (id)initWithFrame:(CGRect)aFrame
 {
     if (self = [super initWithFrame:aFrame])
     {
-        _controlSize = CPRegularControlSize;
         _partRects = [];
 
         [self setFloatValue:0.0];
@@ -202,13 +202,13 @@ CPThemeStateScrollerKnobDark    = CPThemeState("scroller-knob-dark");
 }
 
 
-#pragma mark -
-#pragma mark Getters / Setters
+// MARK: -
+// MARK: Getters / Setters
 
 /*!
     Returns the scroller's style
 */
-- (void)style
+- (int)style
 {
     return _style;
 }
@@ -217,7 +217,7 @@ CPThemeStateScrollerKnobDark    = CPThemeState("scroller-knob-dark");
     Set the scroller's control size
     @param aStyle the scroller style: CPScrollerStyleLegacy or CPScrollerStyleOverlay
 */
-- (void)setStyle:(id)aStyle
+- (void)setStyle:(CPScrollerStyle)aStyle
 {
     if (_style != nil && _style === aStyle)
         return;
@@ -226,6 +226,7 @@ CPThemeStateScrollerKnobDark    = CPThemeState("scroller-knob-dark");
 
     if (_style === CPScrollerStyleLegacy)
     {
+        _allowFadingOut = NO;
         [self fadeIn];
         [self setThemeState:CPThemeStateScrollViewLegacy];
     }
@@ -243,29 +244,6 @@ CPThemeStateScrollerKnobDark    = CPThemeState("scroller-knob-dark");
     [super setObjectValue:MIN(1.0, MAX(0.0, +aValue))];
 }
 
-/*!
-    Returns the scroller's control size
-*/
-- (CPControlSize)controlSize
-{
-    return _controlSize;
-}
-
-/*!
-    Sets the scroller's size.
-    @param aControlSize the scroller's size
-*/
-- (void)setControlSize:(CPControlSize)aControlSize
-{
-    if (_controlSize == aControlSize)
-        return;
-
-    _controlSize = aControlSize;
-
-    [self setNeedsLayout];
-    [self setNeedsDisplay:YES];
-}
-
 /*!
     Return's the knob's proportion
 */
@@ -280,8 +258,8 @@ CPThemeStateScrollerKnobDark    = CPThemeState("scroller-knob-dark");
 */
 - (void)setKnobProportion:(float)aProportion
 {
-    if (!_IS_NUMERIC(aProportion))
-        [CPException raise:CPInvalidArgumentException reason:"aProportion must be numeric"];
+    if (!CPIsNumeric(aProportion))
+        [CPException raise:CPInvalidArgumentException reason:"aProportion must be numeric, was: "+aProportion];
 
     _knobProportion = MIN(1.0, MAX(0.0001, aProportion));
 
@@ -290,8 +268,8 @@ CPThemeStateScrollerKnobDark    = CPThemeState("scroller-knob-dark");
 }
 
 
-#pragma mark -
-#pragma mark Privates
+// MARK: -
+// MARK: Privates
 
 /*! @ignore */
 - (void)_adjustScrollerSize
@@ -316,8 +294,8 @@ CPThemeStateScrollerKnobDark    = CPThemeState("scroller-knob-dark");
 }
 
 
-#pragma mark -
-#pragma mark Utilities
+// MARK: -
+// MARK: Utilities
 
 - (CGRect)rectForPart:(CPScrollerPart)aPart
 {
@@ -339,7 +317,7 @@ CPThemeStateScrollerKnobDark    = CPThemeState("scroller-knob-dark");
     // The ordering of these tests is important.  We check the knob and
     // page rects first since they may overlap with the arrows.
 
-    if (![self hasThemeState:CPThemeStateSelected])
+    if (![self hasThemeState:CPThemeStateSelected] && ![self hasThemeState:CPThemeStateScrollViewLegacy])
         return CPScrollerNoPart;
 
     if (CGRectContainsPoint([self rectForPart:CPScrollerKnob], aPoint))
@@ -403,9 +381,10 @@ CPThemeStateScrollerKnobDark    = CPThemeState("scroller-knob-dark");
             effectiveIncrementLineHeight = incrementLineSize.height + trackInset.bottom,
             slotSize = height - effectiveDecrementLineHeight - effectiveIncrementLineHeight,
             minimumKnobLength = [self currentValueForThemeAttribute:"minimum-knob-length"],
+            knobVerticalInset = knobInset.top + knobInset.bottom,
             knobWidth = width - knobInset.left - knobInset.right,
-            knobHeight = MAX(minimumKnobLength, (slotSize * _knobProportion)),
-            knobLocation = effectiveDecrementLineHeight + (slotSize - knobHeight) * [self floatValue];
+            knobHeight = MAX(minimumKnobLength, ((slotSize - knobVerticalInset) * _knobProportion)),
+            knobLocation = effectiveDecrementLineHeight + (slotSize - knobHeight - knobVerticalInset) * [self floatValue] + knobInset.top;
 
         _partRects[CPScrollerDecrementPage] = CGRectMake(0.0, effectiveDecrementLineHeight, width, knobLocation - effectiveDecrementLineHeight);
         _partRects[CPScrollerKnob]          = CGRectMake(knobInset.left, knobLocation, knobWidth, knobHeight);
@@ -432,9 +411,10 @@ CPThemeStateScrollerKnobDark    = CPThemeState("scroller-knob-dark");
             effectiveIncrementLineWidth = incrementLineSize.width + trackInset.right,
             slotSize = width - effectiveDecrementLineWidth - effectiveIncrementLineWidth,
             minimumKnobLength = [self currentValueForThemeAttribute:"minimum-knob-length"],
-            knobWidth = MAX(minimumKnobLength, (slotSize * _knobProportion)),
+            knobHorizontalInset = knobInset.left + knobInset.right,
+            knobWidth = MAX(minimumKnobLength, ((slotSize - knobHorizontalInset) * _knobProportion)),
             knobHeight = height - knobInset.top - knobInset.bottom,
-            knobLocation = effectiveDecrementLineWidth + (slotSize - knobWidth) * [self floatValue];
+            knobLocation = effectiveDecrementLineWidth + (slotSize - knobWidth - knobHorizontalInset) * [self floatValue] + knobInset.left;
 
         _partRects[CPScrollerDecrementPage] = CGRectMake(effectiveDecrementLineWidth, 0.0, knobLocation - effectiveDecrementLineWidth, height);
         _partRects[CPScrollerKnob]          = CGRectMake(knobLocation, knobInset.top, knobWidth, knobHeight);
@@ -483,15 +463,12 @@ CPThemeStateScrollerKnobDark    = CPThemeState("scroller-knob-dark");
 */
 - (void)fadeOut
 {
-    if ([self hasThemeState:CPThemeStateScrollViewLegacy])
-        return;
-
     [_animationScroller startAnimation];
 }
 
 
-#pragma mark -
-#pragma mark  Drawing
+// MARK: -
+// MARK:  Drawing
 
 /*!
     Draws the specified arrow and sets the highlight.
@@ -725,15 +702,15 @@ CPThemeStateScrollerKnobDark    = CPThemeState("scroller-knob-dark");
 }
 
 
-#pragma mark -
-#pragma mark Overrides
+// MARK: -
+// MARK: Overrides
 
 - (id)currentValueForThemeAttribute:(CPString)anAttributeName
 {
     var themeState = _themeState;
 
     if (NAMES_FOR_PARTS[_hitPart] + "-color" !== anAttributeName)
-        themeState &= ~CPThemeStateHighlighted;
+        themeState = themeState.without(CPThemeStateHighlighted);
 
     return [self valueForThemeAttribute:anAttributeName inState:themeState];
 }
@@ -782,18 +759,28 @@ CPThemeStateScrollerKnobDark    = CPThemeState("scroller-knob-dark");
     if ([self isHidden] || ![self isEnabled] || !_isMouseOver)
         return;
 
-    _allowFadingOut = YES;
+    _allowFadingOut = (_style !== CPScrollerStyleLegacy);
     _isMouseOver = NO;
 
     if (_timerFadeOut)
         [_timerFadeOut invalidate];
 
-    _timerFadeOut = [CPTimer scheduledTimerWithTimeInterval:1.2 target:self selector:@selector(_performFadeOut:) userInfo:nil repeats:NO];
+    if ([self hasThemeState:CPThemeStateScrollViewLegacy])
+        [self unsetThemeState:CPThemeStateSelected];
+    else
+        _timerFadeOut = [CPTimer scheduledTimerWithTimeInterval:1.2 target:self selector:@selector(_performFadeOut:) userInfo:nil repeats:NO];
 }
 
+- (float)scrollerWidth
+{
+    if (_style == CPScrollerStyleLegacy)
+        return [self valueForThemeAttribute:@"scroller-width" inState:CPThemeStateScrollViewLegacy];
 
-#pragma mark -
-#pragma mark Delegates
+    return [self currentValueForThemeAttribute:@"scroller-width"];
+}
+
+// MARK: -
+// MARK: Delegates
 
 - (void)animationDidEnd:(CPAnimation)animation
 {
@@ -802,8 +789,7 @@ CPThemeStateScrollerKnobDark    = CPThemeState("scroller-knob-dark");
 
 @end
 
-var CPScrollerControlSizeKey    = @"CPScrollerControlSize",
-    CPScrollerIsVerticalKey     = @"CPScrollerIsVerticalKey",
+var CPScrollerIsVerticalKey     = @"CPScrollerIsVerticalKey",
     CPScrollerKnobProportionKey = @"CPScrollerKnobProportion",
     CPScrollerStyleKey          = @"CPScrollerStyleKey";
 
@@ -813,10 +799,6 @@ var CPScrollerControlSizeKey    = @"CPScrollerControlSize",
 {
     if (self = [super initWithCoder:aCoder])
     {
-        _controlSize = CPRegularControlSize;
-        if ([aCoder containsValueForKey:CPScrollerControlSizeKey])
-            _controlSize = [aCoder decodeIntForKey:CPScrollerControlSizeKey];
-
         _knobProportion = 1.0;
 
         if ([aCoder containsValueForKey:CPScrollerKnobProportionKey])
@@ -851,7 +833,6 @@ var CPScrollerControlSizeKey    = @"CPScrollerControlSize",
 {
     [super encodeWithCoder:aCoder];
 
-    [aCoder encodeInt:_controlSize forKey:CPScrollerControlSizeKey];
     [aCoder encodeInt:_isVertical forKey:CPScrollerIsVerticalKey];
     [aCoder encodeFloat:_knobProportion forKey:CPScrollerKnobProportionKey];
     [aCoder encodeInt:_style forKey:CPScrollerStyleKey];

AppKit/CPSearchField.j

@@ -24,8 +24,12 @@
 @import "CPMenu.j"
 @import "CPMenuItem.j"
 @import "CPTextField.j"
+@import "CPAnimationContext.j"
+@import "CPViewAnimator.j"
+@import "CPArrayController.j"
 
 @class CPUserDefaults
+@class CALayer
 
 @global CPApp
 
@@ -36,8 +40,6 @@ CPSearchFieldNoRecentsMenuItemTag       = 1003;
 
 var CPAutosavedRecentsChangedNotification = @"CPAutosavedRecentsChangedNotification";
 
-var RECENT_SEARCH_PREFIX = @"   ";
-
 /*!
     @ingroup appkit
     @class CPSearchField
@@ -60,6 +62,9 @@ var RECENT_SEARCH_PREFIX = @"   ";
     BOOL        _sendsSearchStringImmediately;
     BOOL        _canResignFirstResponder;
     CPTimer     _partialStringTimer;
+
+    CPView      _contentView;
+    BOOL        _isBecomingFirstResponder;
 }
 
 + (CPString)defaultThemeClass
@@ -73,10 +78,24 @@ var RECENT_SEARCH_PREFIX = @"   ";
             @"image-search": [CPNull null],
             @"image-find": [CPNull null],
             @"image-cancel": [CPNull null],
-            @"image-cancel-pressed": [CPNull null]
+            @"image-cancel-pressed": [CPNull null],
+            @"image-search-inset" : CGInsetMake(0, 0, 0, 5),
+            @"image-cancel-inset" : CGInsetMake(0, 5, 0, 0),
+            @"search-button-rect-function": [CPNull null],
+            @"layout-function": [CPNull null],
+            @"search-right-margin": 2,
+            @"search-menu-offset": CGPointMake(10, -4)
         };
 }
 
++ (Class)_binderClassForBinding:(CPString)aBinding
+{
+    if (aBinding === CPPredicateBinding)
+        return [_CPSearchFieldPredicateBinder class];
+
+    return [super _binderClassForBinding:aBinding];
+}
+
 - (id)initWithFrame:(CGRect)frame
 {
     if (self = [super initWithFrame:frame])
@@ -87,10 +106,6 @@ var RECENT_SEARCH_PREFIX = @"   ";
         _recentsAutosaveName = nil;
 
         [self _init];
-#if PLATFORM(DOM)
-        _cancelButton._DOMElement.style.cursor = "default";
-        _searchButton._DOMElement.style.cursor = "default";
-#endif
     }
 
     return self;
@@ -117,18 +132,31 @@ var RECENT_SEARCH_PREFIX = @"   ";
     [self resetSearchButton];
 
     _canResignFirstResponder = YES;
+    _isBecomingFirstResponder = NO;
 }
 
-- (void)viewWillMoveToSuperview:(CPView)aView
+
+// MARK: -
+// MARK: Override observers
+
+- (void)_removeObservers
 {
-    [super viewWillMoveToSuperview:aView];
+    if (!_isObserving)
+        return;
+
+    [super _removeObservers];
 
-    // First we remove any observer that may have been in place to avoid memory leakage.
     [[CPNotificationCenter defaultCenter] removeObserver:self name:CPControlTextDidChangeNotification object:self];
+}
 
-    // Register the observe here if we need to.
-    if (aView)
-        [[CPNotificationCenter defaultCenter] addObserver:self selector:@selector(_searchFieldTextDidChange:) name:CPControlTextDidChangeNotification object:self];
+- (void)_addObservers
+{
+    if (_isObserving)
+        return;
+
+    [super _addObservers];
+
+    [[CPNotificationCenter defaultCenter] addObserver:self selector:@selector(_searchFieldTextDidChange:) name:CPControlTextDidChangeNotification object:self];
 }
 
 // Managing Buttons
@@ -165,7 +193,7 @@ var RECENT_SEARCH_PREFIX = @"   ";
 - (void)resetSearchButton
 {
     var button = [self searchButton],
-        searchButtonImage = (_searchMenuTemplate === nil) ? [self valueForThemeAttribute:@"image-search"] : [self valueForThemeAttribute:@"image-find"];
+        searchButtonImage = (_searchMenuTemplate == nil) ? [self currentValueForThemeAttribute:@"image-search"] : [self currentValueForThemeAttribute:@"image-find"];
 
     [button setBordered:NO];
     [button setImageScaling:CPImageScaleAxesIndependently];
@@ -212,8 +240,8 @@ var RECENT_SEARCH_PREFIX = @"   ";
     var button = [self cancelButton];
     [button setBordered:NO];
     [button setImageScaling:CPImageScaleAxesIndependently];
-    [button setImage:[self valueForThemeAttribute:@"image-cancel"]];
-    [button setAlternateImage:[self valueForThemeAttribute:@"image-cancel-pressed"]];
+    [button setImage:[self currentValueForThemeAttribute:@"image-cancel"]];
+    [button setAlternateImage:[self currentValueForThemeAttribute:@"image-cancel-pressed"]];
     [button setAutoresizingMask:CPViewMinXMargin];
     [button setTarget:self];
     [button setAction:@selector(cancelOperation:)];
@@ -234,8 +262,9 @@ var RECENT_SEARCH_PREFIX = @"   ";
 
     if (_searchButton)
     {
-        var searchBounds = [self searchButtonRectForBounds:bounds];
-        leftOffset = CGRectGetMaxX(searchBounds) + 2;
+        var searchBounds = [self searchButtonRectForBounds:bounds],
+            rightMargin  = [self _potentialCurrentValueForThemeAttribute:@"search-right-margin"];
+        leftOffset = CGRectGetMaxX(searchBounds) + rightMargin;
     }
 
     if (_cancelButton)
@@ -254,9 +283,18 @@ var RECENT_SEARCH_PREFIX = @"   ";
 */
 - (CGRect)searchButtonRectForBounds:(CGRect)rect
 {
-    var size = [[self valueForThemeAttribute:@"image-search"] size] || CGSizeMakeZero();
+    var themedRectFunction = [self _potentialCurrentValueForThemeAttribute:@"search-button-rect-function"];
 
-    return CGRectMake(5, (CGRectGetHeight(rect) - size.height) / 2, size.width, size.height);
+    if (themedRectFunction)
+        // There's a theme defined positioning function, just use it
+        return objj_eval("("+themedRectFunction+")")(self, rect);
+    else
+    {
+        var size = [[self _potentialCurrentValueForThemeAttribute:@"image-search"] size] || CGSizeMakeZero(),
+            inset = [self _potentialCurrentValueForThemeAttribute:@"image-search-inset"];
+
+        return CGRectMake(inset.left - inset.right, inset.top - inset.bottom + (CGRectGetHeight(rect) - size.height) / 2, size.width, size.height);
+    }
 }
 
 /*!
@@ -266,9 +304,10 @@ var RECENT_SEARCH_PREFIX = @"   ";
 */
 - (CGRect)cancelButtonRectForBounds:(CGRect)rect
 {
-    var size = [[self valueForThemeAttribute:@"image-cancel"] size] || CGSizeMakeZero();
+    var size = [[self _potentialCurrentValueForThemeAttribute:@"image-cancel"] size] || CGSizeMakeZero(),
+        inset = [self _potentialCurrentValueForThemeAttribute:@"image-cancel-inset"];
 
-    return CGRectMake(CGRectGetWidth(rect) - size.width - 5, (CGRectGetHeight(rect) - size.width) / 2, size.height, size.height);
+    return CGRectMake(CGRectGetWidth(rect) - size.width + inset.left - inset.right, inset.top - inset.bottom + (CGRectGetHeight(rect) - size.width) / 2, size.height, size.height);
 }
 
 // Managing Menu Templates
@@ -372,10 +411,9 @@ var RECENT_SEARCH_PREFIX = @"   ";
 */
 - (void)setRecentSearches:(CPArray)searches
 {
-    var max = MIN([self maximumRecents], [searches count]),
-        searches = [searches subarrayWithRange:CPMakeRange(0, max)];
+    var max = MIN([self maximumRecents], [searches count]);
 
-    _recentSearches = searches;
+    _recentSearches = [searches subarrayWithRange:CPMakeRange(0, max)];
     [self _autosaveRecentSearchList];
 }
 
@@ -460,6 +498,7 @@ var RECENT_SEARCH_PREFIX = @"   ";
 
 - (BOOL)sendAction:(SEL)anAction to:(id)anObject
 {
+    [self selectAll:nil];
     [super sendAction:anAction to:anObject];
 
     [_partialStringTimer invalidate];
@@ -470,7 +509,7 @@ var RECENT_SEARCH_PREFIX = @"   ";
 
 - (void)_addStringToRecentSearches:(CPString)string
 {
-    if (string === nil || string === @"" || [_recentSearches containsObject:string])
+    if (string == nil || string === @"" || [_recentSearches containsObject:string])
         return;
 
     var searches = [CPMutableArray arrayWithArray:_recentSearches];
@@ -517,19 +556,16 @@ var RECENT_SEARCH_PREFIX = @"   ";
 }
 
 /*!
-    Provides the common case items for a recent searches menu. If there are not recent searches,
-    displays a single disabled item:
-
-        No Recent Searches
+    Provides the common case items for a recent searches menu.
 
     If there are 1 more recent searches, it displays:
 
-        Recent Searches
-           recent search 1
-           recent search 2
-           etc.
+        Clear
         ---------------------
-        Clear Recent Searches
+        Recent Searches
+        recent search 1
+        recent search 2
+        etc.
 
     If you wish to add items before or after the template, you can. If you put items
     before, a separator will automatically be placed before the default template item.
@@ -554,6 +590,15 @@ var RECENT_SEARCH_PREFIX = @"   ";
     var template = [[CPMenu alloc] init],
         item;
 
+    item = [[CPMenuItem alloc] initWithTitle:@"Clear"
+                                      action:@selector(_searchFieldClearRecents:)
+                               keyEquivalent:@""];
+    [item setTag:CPSearchFieldClearRecentsMenuItemTag];
+    [item setTarget:self];
+    [template addItem:item];
+
+    [self _addSeparatorToMenu:template];
+
     item = [[CPMenuItem alloc] initWithTitle:@"Recent Searches"
                                       action:nil
                                keyEquivalent:@""];
@@ -568,32 +613,20 @@ var RECENT_SEARCH_PREFIX = @"   ";
     [item setTarget:self];
     [template addItem:item];
 
-    item = [[CPMenuItem alloc] initWithTitle:@"Clear Recent Searches"
-                                      action:@selector(_searchFieldClearRecents:)
-                               keyEquivalent:@""];
-    [item setTag:CPSearchFieldClearRecentsMenuItemTag];
-    [item setTarget:self];
-    [template addItem:item];
-
-    item = [[CPMenuItem alloc] initWithTitle:@"No Recent Searches"
-                                      action:nil
-                               keyEquivalent:@""];
-    [item setTag:CPSearchFieldNoRecentsMenuItemTag];
-    [item setEnabled:NO];
-    [template addItem:item];
-
     return template;
 }
 
 - (void)_updateSearchMenu
 {
-    if (_searchMenuTemplate === nil)
+    if (_searchMenuTemplate == nil)
         return;
 
     var menu = [[CPMenu alloc] init],
         countOfRecents = [_recentSearches count],
         numberOfItems = [_searchMenuTemplate numberOfItems];
 
+    [menu setAutoenablesItems:NO];
+
     for (var i = 0; i < numberOfItems; i++)
     {
         var item = [[_searchMenuTemplate itemAtIndex:i] copy];
@@ -603,9 +636,6 @@ var RECENT_SEARCH_PREFIX = @"   ";
             case CPSearchFieldRecentsTitleMenuItemTag:
                 if (countOfRecents === 0)
                     continue;
-
-                if ([menu numberOfItems] > 0)
-                    [self _addSeparatorToMenu:menu];
                 break;
 
             case CPSearchFieldRecentsMenuItemTag:
@@ -614,8 +644,7 @@ var RECENT_SEARCH_PREFIX = @"   ";
 
                 for (var recentIndex = 0; recentIndex < countOfRecents; ++recentIndex)
                 {
-                    // RECENT_SEARCH_PREFIX is a hack until CPMenuItem -setIndentationLevel works
-                    var recentItem = [[CPMenuItem alloc] initWithTitle:RECENT_SEARCH_PREFIX + [_recentSearches objectAtIndex:recentIndex]
+                    var recentItem = [[CPMenuItem alloc] initWithTitle:[_recentSearches objectAtIndex:recentIndex]
                                                                  action:itemAction
                                                           keyEquivalent:[item keyEquivalent]];
                     [item setTarget:self];
@@ -629,9 +658,6 @@ var RECENT_SEARCH_PREFIX = @"   ";
                 if (countOfRecents === 0)
                     continue;
 
-                if ([menu numberOfItems] > 0)
-                    [self _addSeparatorToMenu:menu];
-
                 [item setAction:@selector(_searchFieldClearRecents:)];
                 [item setTarget:self];
                 break;
@@ -639,9 +665,6 @@ var RECENT_SEARCH_PREFIX = @"   ";
             case CPSearchFieldNoRecentsMenuItemTag:
                 if (countOfRecents !== 0)
                     continue;
-
-                if ([menu numberOfItems] > 0)
-                    [self _addSeparatorToMenu:menu];
                 break;
             }
 
@@ -658,6 +681,7 @@ var RECENT_SEARCH_PREFIX = @"   ";
 {
     var separator = [CPMenuItem separatorItem];
     [separator setEnabled:NO];
+    [separator setTag:CPSearchFieldRecentsTitleMenuItemTag];
     [aMenu addItem:separator];
 }
 
@@ -679,7 +703,8 @@ var RECENT_SEARCH_PREFIX = @"   ";
         return;
 
     var aFrame = [[self superview] convertRect:[self frame] toView:nil],
-        location = CGPointMake(aFrame.origin.x + 10, aFrame.origin.y + aFrame.size.height - 4);
+        offset = [self currentValueForThemeAttribute:@"search-menu-offset"],
+        location = CGPointMake(aFrame.origin.x + offset.x, aFrame.origin.y + aFrame.size.height + offset.y);
 
     var anEvent = [CPEvent mouseEventWithType:CPRightMouseDown location:location modifierFlags:0 timestamp:[[CPApp currentEvent] timestamp] windowNumber:[[self window] windowNumber] context:nil eventNumber:1 clickCount:1 pressure:0];
 
@@ -695,15 +720,19 @@ var RECENT_SEARCH_PREFIX = @"   ";
 
 - (void)cancelOperation:(id)sender
 {
-    [self setObjectValue:@""];
-    [self textDidChange:[CPNotification notificationWithName:CPControlTextDidChangeNotification object:self userInfo:nil]];
+    // If something was entered, the search field must deactivate itself (else, do nothing)
+    if ([[self stringValue] length] > 0)
+    {
+        [self setObjectValue:@""];
+        [self textDidChange:[CPNotification notificationWithName:CPControlTextDidChangeNotification object:self userInfo:nil]];
 
-    [self _updateCancelButtonVisibility];
+        [[self window] makeFirstResponder:[self window]];
+    }
 }
 
 - (void)_searchFieldSearch:(id)sender
 {
-    var searchString = [[sender title] substringFromIndex:[RECENT_SEARCH_PREFIX length]];
+    var searchString = [sender title];
 
     if ([sender tag] != CPSearchFieldRecentsMenuItemTag)
         [self _addStringToRecentSearches:searchString];
@@ -748,17 +777,266 @@ var RECENT_SEARCH_PREFIX = @"   ";
 - (void)_loadRecentSearchList
 {
     var name = [self recentsAutosaveName];
-    if (name === nil)
+    if (name == nil)
         return;
 
     var list = [[CPUserDefaults standardUserDefaults] objectForKey:name];
 
-    if (list !== nil)
+    if (list != nil)
         _recentSearches = list;
 }
 
 @end
 
+// MARK: -
+
+@implementation CPSearchField (ThemingAdditions)
+
+// Overwrite CPTextField method to permit themed layout functions
+
+- (void)layoutSubviews
+{
+    if (!_contentView)
+    {
+        // Search for the CPImageAndTextView subview of mine
+
+        for (var i = 0, subviews = [self subviews], nb = [subviews count]; (!_contentView && (i < nb)); i++)
+            if ([subviews[i] isKindOfClass:_CPImageAndTextView])
+                _contentView = subviews[i];
+    }
+
+    var bezelColor = [self currentValueForThemeAttribute:@"bezel-color"];
+
+    if ([bezelColor isCSSBased])
+    {
+        // CSS Styling
+        // We don't need bezelView as we apply CSS styling directly on the search view itself
+
+        [self _setBackgroundColor:bezelColor];
+
+        if (!_contentView)
+            _contentView = [self layoutEphemeralSubviewNamed:@"content-view"
+                                                  positioned:CPWindowAbove
+                             relativeToEphemeralSubviewNamed:nil];
+    }
+    else
+    {
+        var bezelView = [self layoutEphemeralSubviewNamed:@"bezel-view"
+                                               positioned:CPWindowBelow
+                          relativeToEphemeralSubviewNamed:@"content-view"];
+
+        [bezelView setBackgroundColor:bezelColor];
+
+        if (!_contentView)
+            _contentView = [self layoutEphemeralSubviewNamed:@"content-view"
+                                                  positioned:CPWindowAbove
+                             relativeToEphemeralSubviewNamed:@"bezel-view"];
+    }
+
+    if (_contentView)
+    {
+        [_contentView setHidden:(_stringValue && _stringValue.length > 0) && [self hasThemeState:CPThemeStateEditing]];
+
+        [_contentView setText:[self hasThemeState:CPTextFieldStatePlaceholder] ? [self placeholderString] : _stringValue];
+        [_contentView setTextColor:[self currentValueForThemeAttribute:@"text-color"]];
+        [_contentView setFont:[self font]]; //[self currentValueForThemeAttribute:@"font"]];
+        [_contentView setAlignment:[self currentValueForThemeAttribute:@"alignment"]];
+        [_contentView setVerticalAlignment:[self currentValueForThemeAttribute:@"vertical-alignment"]];
+        [_contentView setLineBreakMode:[self currentValueForThemeAttribute:@"line-break-mode"]];
+        [_contentView setTextShadowColor:[self currentValueForThemeAttribute:@"text-shadow-color"]];
+        [_contentView setTextShadowOffset:[self currentValueForThemeAttribute:@"text-shadow-offset"]];
+    }
+
+    if (_isEditing)
+        [self _setCSSStyleForInputElement];
+
+    [self updateSearchButton];
+    [self updateTrackingAreas];
+}
+
+// As CPTextField redefines setBackgroundColor, we have to bypass it
+- (void)_setBackgroundColor:(CPColor)aColor
+{
+    var grannyMethod         = class_getInstanceMethod([[self superclass] superclass], @selector(setBackgroundColor:)),
+        grannyImplementation = method_getImplementation(grannyMethod);
+
+    grannyImplementation(self, @selector(setBackgroundColor:), aColor);
+}
+
+- (void)_layoutSubviews
+{
+    var themedLayoutFunction = [self currentValueForThemeAttribute:@"layout-function"];
+
+    if (themedLayoutFunction)
+        // There's a theme defined layout function, just use it
+        objj_eval("("+themedLayoutFunction+")")(self);
+    else
+        // Call directly the completion handler
+        [self themedLayoutFunctionCompletionHandler];
+}
+
+- (void)updateSearchButton
+{
+    [_searchButton setImage:(_searchMenuTemplate ? [self currentValueForThemeAttribute:@"image-find"] : [self currentValueForThemeAttribute:@"image-search"])];
+    [self updateTrackingAreas];
+}
+
+- (void)themedLayoutFunctionCompletionHandler
+{
+    if (_isBecomingFirstResponder)
+    {
+        _isBecomingFirstResponder = NO;
+
+        // Call the real _becomeFirstKeyResponder to finish setting the input element
+        [super _becomeFirstKeyResponder];
+
+        // For some (unknown yet) reason, input field doesn't focus and text field visual state is not updated
+        var element = [self _inputElement];
+        element.focus();
+        [self layoutSubviews];
+        [CALayer runLoopUpdateLayers]; // Thank you @daboe01 for suggesting adding this
+    }
+    else
+        [self layoutSubviews];
+}
+
+// We override CPTextField method in order to delay the display of the input element until the end of the animation
+- (BOOL)_becomeFirstKeyResponder
+{
+    // As we have to return a result, we check if response could be NO
+
+    if (![self _isWithinUsablePlatformRect] || ![self isEditable])
+        return NO;
+
+    // We are now sure that response will be YES
+    _isBecomingFirstResponder = YES;
+
+    // We have to do this now in order to avoid running conditions messing things among multiple textfields
+    _stringValue = [self stringValue];
+    var element = [self _inputElement];
+    element.value = _stringValue;
+
+    [self _layoutSubviews];
+
+    return YES;
+}
+
+- (void)textDidEndEditing:(CPNotification)note
+{
+    if ([note object] != self)
+        return;
+
+    [self _layoutSubviews];
+    [super textDidEndEditing:note];
+}
+
+- (void)_windowDidResignKey:(CPNotification)aNotification
+{
+    // When the window resigns key, if the search field is empty, it must cancel first responder
+    if ([[self stringValue] length] == 0)
+        [[self window] makeFirstResponder:[self window]];
+
+    [super _windowDidResignKey:aNotification];
+    [self _layoutSubviews];
+}
+
+- (void)setPlaceholderString:(CPString)aStringValue
+{
+    [super setPlaceholderString:aStringValue];
+    [self _layoutContent];
+}
+
+- (void)_layoutContent
+{
+    [_searchButton setFrame:[self searchButtonRectForBounds:[self bounds]]];
+    [_contentView  setFrame:[self contentRectForBounds:[self bounds]]];
+    [_cancelButton setFrame:[self cancelButtonRectForBounds:[self bounds]]];
+    [self updateTrackingAreas];
+}
+
+- (void)setFrameSize:(CGSize)aSize
+{
+    [super setFrameSize:aSize];
+    [self _layoutContent];
+}
+
+- (id)_potentialCurrentValueForThemeAttribute:(CPString)aName
+{
+    if (_isBecomingFirstResponder)
+        return [self valueForThemeAttribute:aName inState:[self themeState].and(CPThemeStateEditing)];
+    else
+        return [self currentValueForThemeAttribute:aName];
+}
+
+- (void)unbind:(CPString)aBinding
+{
+    [super unbind:aBinding];
+
+    // our CPPredicateBinding binder adds a binding to the value.
+    // this private binding has to be also removed
+    if (aBinding === CPPredicateBinding)
+        [[[self class] _binderClassForBinding:aBinding] unbind:CPValueBinding forObject:self];
+}
+
+@end
+
+// MARK: -
+
+@implementation CPSearchField (CPTrackingArea)
+{
+    CPTrackingArea      _searchButtonTrackingArea;
+    CPTrackingArea      _cancelButtonTrackingArea;
+}
+
+- (void)updateTrackingAreas
+{
+    if (_searchButtonTrackingArea)
+    {
+        [self removeTrackingArea:_searchButtonTrackingArea];
+        _searchButtonTrackingArea = nil;
+    }
+
+    if (_cancelButtonTrackingArea)
+    {
+        [self removeTrackingArea:_cancelButtonTrackingArea];
+        _cancelButtonTrackingArea = nil;
+    }
+
+    if (_searchButton)
+    {
+        _searchButtonTrackingArea = [[CPTrackingArea alloc] initWithRect:[_searchButton frame]
+                                                                 options:CPTrackingCursorUpdate | CPTrackingActiveInKeyWindow
+                                                                   owner:self
+                                                                userInfo:@{ @"isButton": YES }];
+
+        [self addTrackingArea:_searchButtonTrackingArea];
+    }
+
+    if (_cancelButton && ![_cancelButton isHidden])
+    {
+        _cancelButtonTrackingArea = [[CPTrackingArea alloc] initWithRect:[_cancelButton frame]
+                                                                 options:CPTrackingCursorUpdate | CPTrackingActiveInKeyWindow
+                                                                   owner:self
+                                                                userInfo:@{ @"isButton": YES }];
+
+        [self addTrackingArea:_cancelButtonTrackingArea];
+    }
+
+    [super updateTrackingAreas];
+}
+
+- (void)cursorUpdate:(CPEvent)anEvent
+{
+    if ([[[anEvent trackingArea] userInfo] objectForKey:@"isButton"])
+        [[CPCursor arrowCursor] set];
+    else
+        [super cursorUpdate:anEvent];
+}
+
+@end
+
+// MARK: -
+
 var CPRecentsAutosaveNameKey            = @"CPRecentsAutosaveNameKey",
     CPSendsWholeSearchStringKey         = @"CPSendsWholeSearchStringKey",
     CPSendsSearchStringImmediatelyKey   = @"CPSendsSearchStringImmediatelyKey",
@@ -811,3 +1089,49 @@ var CPRecentsAutosaveNameKey            = @"CPRecentsAutosaveNameKey",
 }
 
 @end
+
+@implementation _CPSearchFieldPredicateBinder : CPBinder
+{
+    CPArrayController  _controller;
+    CPString           _predicateFormat;
+}
+
+- (void)setValue:(id)aValue forBinding:(CPString)aBinding
+{
+    if (aBinding === CPPredicateBinding)
+    {
+        var options = [_info objectForKey:CPOptionsKey];
+
+        _controller = [_info objectForKey:CPObservedObjectKey];
+        _predicateFormat = [options objectForKey:"CPPredicateFormat"];
+        [_source bind:CPValueBinding toObject:self withKeyPath:"searchFieldValue" options:nil];
+    }
+}
+
+- (void)setSearchFieldValue:(CPString)aValue
+{
+    var destination = [_info objectForKey:CPObservedObjectKey],
+        keyPath     = [_info objectForKey:CPObservedKeyPathKey];
+
+    [self suppressSpecificNotificationFromObject:destination keyPath:keyPath];
+
+    if (aValue)
+    {
+        var values       = @[],
+            formatString = _predicateFormat.replace(/\$value/g, function(x) {[values addObject:aValue]; return "%@";});
+
+        [_controller setFilterPredicate:[CPPredicate predicateWithFormat:formatString argumentArray:values]];
+    }
+    else
+        [_controller setFilterPredicate:nil];
+
+    [self unsuppressSpecificNotificationFromObject:destination keyPath:keyPath];
+}
+
+- (CPString)searchFieldValue
+{
+    return [_source stringValue];
+}
+
+@end
+

AppKit/CPSegmentedControl.j

@@ -25,9 +25,11 @@
 @import "CPControl.j"
 @import "CPWindow_Constants.j"
 @import "_CPImageAndTextView.j"
+@import "CPMenu.j"
 
 @global CPApp
 
+@typedef CPSegmentSwitchTracking
 CPSegmentSwitchTrackingSelectOne = 0;
 CPSegmentSwitchTrackingSelectAny = 1;
 CPSegmentSwitchTrackingMomentary = 2;
@@ -40,7 +42,7 @@ CPSegmentSwitchTrackingMomentary = 2;
 */
 @implementation CPSegmentedControl : CPControl
 {
-    CPArray                 _segments;
+    CPArray                 _segments @accessors(getter=segments);
     CPArray                 _themeStates;
 
     int                     _selectedSegment;
@@ -70,23 +72,9 @@ CPSegmentSwitchTrackingMomentary = 2;
             @"center-segment-bezel-color": [CPNull null],
             @"divider-bezel-color": [CPNull null],
             @"divider-thickness": 1.0,
-            @"default-height": 24.0,
         };
 }
 
-+ (Class)_binderClassForBinding:(CPString)aBinding
-{
-    if ([self _isSelectionBinding:aBinding])
-        return [_CPSegmentedControlBinder class];
-
-    return [super _binderClassForBinding:aBinding];
-}
-
-+ (BOOL)_isSelectionBinding:(CPString)aBinding
-{
-    return (aBinding === CPSelectedIndexBinding || aBinding === CPSelectedLabelBinding || aBinding === CPSelectedTagBinding);
-}
-
 - (id)initWithFrame:(CGRect)aRect
 {
     _segments = [];
@@ -99,22 +87,21 @@ CPSegmentSwitchTrackingMomentary = 2;
         _selectedSegment = -1;
 
         _trackingMode = CPSegmentSwitchTrackingSelectOne;
+        _trackingHighlighted = NO;
+        _trackingSegment = -1;
     }
 
     return self;
 }
 
-- (void)bind:(CPString)aBinding toObject:(id)anObject withKeyPath:(CPString)aKeyPath options:(CPDictionary)options
+/*!
+    Sets the control's size.
+    @param aControlSize the control's size
+*/
+- (void)setControlSize:(CPControlSize)aControlSize
 {
-    if ([[self class] _isSelectionBinding:aBinding] && _trackingMode !== CPSegmentSwitchTrackingSelectOne)
-        CPLog.warn("Binding " + aBinding + " needs CPSegmentSwitchTrackingSelectOne tracking mode");
-    else
-        [super bind:aBinding toObject:anObject withKeyPath:aKeyPath options:options];
-}
-
-- (void)_reverseSetBinding
-{
-    [_CPSegmentedControlBinder reverseSetValueForObject:self];
+    [super setControlSize:aControlSize];
+    [self _sizeToControlSize];
 }
 
 /*!
@@ -122,7 +109,54 @@ CPSegmentSwitchTrackingMomentary = 2;
 */
 - (int)selectedTag
 {
-    return [_segments[_selectedSegment] tag];
+    return [[_segments objectAtIndex:_selectedSegment] tag];
+}
+
+/*! @ignore */
+- (void)setSegments:(CPArray)segments
+{
+    [self removeSegmentsAtIndexes:[CPIndexSet indexSetWithIndexesInRange:CPMakeRange(0, [self  segmentCount])]];
+
+    [self insertSegments:segments atIndexes:[CPIndexSet indexSetWithIndexesInRange:CPMakeRange(0, [segments count])]];
+}
+
+/*! @ignore */
+- (void)insertSegments:(CPArray)segments atIndexes:(CPIndexSet)indices
+{
+    if ([segments count] == 0)
+        return;
+
+    var newStates = @[],
+        count = [indices count];
+
+    while (count--)
+        [newStates addObject:CPThemeStateNormal];
+
+    [_segments insertObjects:segments atIndexes:indices];
+    [_themeStates insertObjects:newStates atIndexes:indices];
+
+    if (_selectedSegment >= [indices firstIndex])
+        _selectedSegment += [indices count];
+}
+
+/*! @ignore */
+- (void)removeSegmentsAtIndexes:(CPIndexSet)indices
+{
+    if ([indices count] == 0)
+        return;
+
+    [indices enumerateIndexesUsingBlock:function(idx, stop)
+    {
+        [[_segments objectAtIndex:idx] setSelected:NO];
+    }];
+
+    if ([indices containsIndex:_selectedSegment])
+        _selectedSegment = -1;
+    else if ([indices lastIndex] < _selectedSegment)
+        _selectedSegment -= [indices count];
+
+    [_segments removeObjectsAtIndexes:indices];
+    [_themeStates removeObjectsAtIndexes:indices];
 }
 
 // Specifying the number of segments
@@ -132,41 +166,32 @@ CPSegmentSwitchTrackingMomentary = 2;
 */
 - (void)setSegmentCount:(unsigned)aCount
 {
-    if (_segments.length == aCount)
+    var prevCount = [_segments count];
+
+    if (aCount == prevCount)
         return;
 
-    var height = CGRectGetHeight([self bounds]),
-        dividersBefore = MAX(0, _segments.length - 1),
-        dividersAfter = MAX(0, aCount - 1);
-
-    if (_segments.length < aCount)
+    if (aCount > prevCount)
     {
-        for (var index = _segments.length; index < aCount; ++index)
-        {
-            _segments[index] = [[_CPSegmentItem alloc] init];
-            _themeStates[index] = CPThemeStateNormal;
-        }
-    }
-    else if (aCount < _segments.length)
-    {
-        _segments.length = aCount;
-        _themeStates.length = aCount;
-    }
+        var count = aCount - prevCount,
+            segments = @[];
 
-    if (_selectedSegment >= _segments.length)
+        while (count--)
+            [segments addObject:[[_CPSegmentItem alloc] init]];
+
+        [self insertSegments:segments atIndexes:[CPIndexSet indexSetWithIndexesInRange:CPMakeRange(prevCount, aCount - prevCount)]];
+    }
+    else
+        [self removeSegmentsAtIndexes:[CPIndexSet indexSetWithIndexesInRange:CPMakeRange(aCount, prevCount - aCount)]];
+
+    [self _updateSelectionIfNeeded];
+    [self tileWithChangedSegment:MAX(MIN(prevCount, aCount) - 1, 0)];
+}
+
+- (void)_updateSelectionIfNeeded
+{
+    if (_selectedSegment >= [self segmentCount])
         _selectedSegment = -1;
-
-    var thickness = [self currentValueForThemeAttribute:@"divider-thickness"],
-        frame = [self frame],
-        widthOfAllSegments = 0,
-        dividerExtraSpace = ([_segments count] - 1) * thickness;
-
-    for (var i = 0; i < [_segments count]; i++)
-        widthOfAllSegments += [_segments[i] width];
-
-    [self setFrameSize:CGSizeMake(widthOfAllSegments + dividerExtraSpace, frame.size.height)];
-
-    [self tileWithChangedSegment:0];
 }
 
 /*!
@@ -174,7 +199,7 @@ CPSegmentSwitchTrackingMomentary = 2;
 */
 - (unsigned)segmentCount
 {
-    return _segments.length;
+    return [_segments count];
 }
 
 // Specifying Selected Segment
@@ -186,7 +211,20 @@ CPSegmentSwitchTrackingMomentary = 2;
 - (void)setSelectedSegment:(unsigned)aSegment
 {
     // setSelected:forSegment throws the exception for us (if necessary)
-    [self setSelected:YES forSegment:aSegment];
+    if (_selectedSegment == aSegment)
+        return;
+
+    if (aSegment == -1)
+    {
+        var count = [self segmentCount];
+
+        while (count--)
+            [self setSelected:NO forSegment:count];
+
+        _selectedSegment = -1;
+    }
+    else
+        [self setSelected:YES forSegment:aSegment];
 }
 
 /*!
@@ -204,8 +242,8 @@ CPSegmentSwitchTrackingMomentary = 2;
 {
     var index = 0;
 
-    for (; index < _segments.length; ++index)
-        if (_segments[index].tag == aTag)
+    for (; index < [_segments count]; ++index)
+        if ([[_segments objectAtIndex:index] tag] == aTag)
         {
             [self setSelectedSegment:index];
 
@@ -219,8 +257,8 @@ CPSegmentSwitchTrackingMomentary = 2;
 {
     var index = 0;
 
-    for (; index < _segments.length; ++index)
-        if (_segments[index].label == aLabel)
+    for (; index < [_segments count]; ++index)
+        if ([[_segments objectAtIndex:index] label] == aLabel)
         {
             [self setSelectedSegment:index];
 
@@ -231,7 +269,7 @@ CPSegmentSwitchTrackingMomentary = 2;
 }
 
 // Specifying Tracking Mode
-
+/*! @ignore */
 - (BOOL)isTracking
 {
 
@@ -249,7 +287,7 @@ CPSegmentSwitchTrackingMomentary = 2;
         var index = 0,
             selected = NO;
 
-        for (; index < _segments.length; ++index)
+        for (; index < [self segmentCount]; ++index)
             if ([_segments[index] selected])
                 if (selected)
                     [self setSelected:NO forSegment:index];
@@ -261,7 +299,7 @@ CPSegmentSwitchTrackingMomentary = 2;
     {
         var index = 0;
 
-        for (; index < _segments.length; ++index)
+        for (; index < [self segmentCount]; ++index)
             if ([_segments[index] selected])
                 [self setSelected:NO forSegment:index];
     }
@@ -284,8 +322,7 @@ CPSegmentSwitchTrackingMomentary = 2;
 */
 - (void)setWidth:(float)aWidth forSegment:(unsigned)aSegment
 {
-    [_segments[aSegment] setWidth:aWidth];
-
+    [[_segments objectAtIndex:aSegment] setWidth:aWidth];
     [self tileWithChangedSegment:aSegment];
 }
 
@@ -296,7 +333,7 @@ CPSegmentSwitchTrackingMomentary = 2;
 */
 - (float)widthForSegment:(unsigned)aSegment
 {
-    return [_segments[aSegment] width];
+    return [[_segments objectAtIndex:aSegment] width];
 }
 
 /*!
@@ -307,7 +344,7 @@ CPSegmentSwitchTrackingMomentary = 2;
 */
 - (void)setImage:(CPImage)anImage forSegment:(unsigned)aSegment
 {
-    [_segments[aSegment] setImage:anImage];
+    [[_segments objectAtIndex:aSegment] setImage:anImage];
 
     [self tileWithChangedSegment:aSegment];
 }
@@ -319,7 +356,7 @@ CPSegmentSwitchTrackingMomentary = 2;
 */
 - (CPImage)imageForSegment:(unsigned)aSegment
 {
-    return [_segments[aSegment] image];
+    return [[_segments objectAtIndex:aSegment] image];
 }
 
 /*!
@@ -330,7 +367,7 @@ CPSegmentSwitchTrackingMomentary = 2;
 */
 - (void)setLabel:(CPString)aLabel forSegment:(unsigned)aSegment
 {
-    [_segments[aSegment] setLabel:aLabel];
+    [[_segments objectAtIndex:aSegment] setLabel:aLabel];
 
     [self tileWithChangedSegment:aSegment];
 }
@@ -342,7 +379,7 @@ CPSegmentSwitchTrackingMomentary = 2;
 */
 - (CPString)labelForSegment:(unsigned)aSegment
 {
-    return [_segments[aSegment] label];
+    return [[_segments objectAtIndex:aSegment] label];
 }
 
 /*!
@@ -353,7 +390,7 @@ CPSegmentSwitchTrackingMomentary = 2;
 */
 - (void)setMenu:(CPMenu)aMenu forSegment:(unsigned)aSegment
 {
-    [_segments[aSegment] setMenu:aMenu];
+    [[_segments objectAtIndex:aSegment] setMenu:aMenu];
 }
 
 /*!
@@ -363,7 +400,7 @@ CPSegmentSwitchTrackingMomentary = 2;
 */
 - (CPMenu)menuForSegment:(unsigned)aSegment
 {
-    return [_segments[aSegment] menu];
+    return [[_segments objectAtIndex:aSegment] menu];
 }
 
 /*!
@@ -375,7 +412,7 @@ CPSegmentSwitchTrackingMomentary = 2;
 */
 - (void)setSelected:(BOOL)isSelected forSegment:(unsigned)aSegment
 {
-    var segment = _segments[aSegment];
+    var segment = [_segments objectAtIndex:aSegment];
 
     // If we're already in this state, bail.
     if ([segment selected] == isSelected)
@@ -392,7 +429,7 @@ CPSegmentSwitchTrackingMomentary = 2;
 
         _selectedSegment = aSegment;
 
-        if (_trackingMode == CPSegmentSwitchTrackingSelectOne && oldSelectedSegment != aSegment && oldSelectedSegment != -1)
+        if (_trackingMode == CPSegmentSwitchTrackingSelectOne && oldSelectedSegment != aSegment && oldSelectedSegment != -1 && oldSelectedSegment < _segments.length)
         {
             [_segments[oldSelectedSegment] setSelected:NO];
             _themeStates[oldSelectedSegment] = CPThemeStateNormal;
@@ -415,7 +452,7 @@ CPSegmentSwitchTrackingMomentary = 2;
 */
 - (BOOL)isSelectedForSegment:(unsigned)aSegment
 {
-    return [_segments[aSegment] selected];
+    return [[_segments objectAtIndex:aSegment] selected];
 }
 
 /*!
@@ -426,15 +463,17 @@ CPSegmentSwitchTrackingMomentary = 2;
 */
 - (void)setEnabled:(BOOL)shouldBeEnabled forSegment:(unsigned)aSegment
 {
-    if ([_segments[aSegment] enabled] === shouldBeEnabled)
+    var segment = [_segments objectAtIndex:aSegment];
+
+    if ([segment enabled] === shouldBeEnabled)
         return;
 
-    [_segments[aSegment] setEnabled:shouldBeEnabled];
+    [segment setEnabled:shouldBeEnabled];
 
     if (shouldBeEnabled)
-        _themeStates[aSegment] &= ~CPThemeStateDisabled;
+        _themeStates[aSegment] = _themeStates[aSegment].without(CPThemeStateDisabled);
     else
-        _themeStates[aSegment] |= CPThemeStateDisabled;
+        _themeStates[aSegment] = _themeStates[aSegment].and(CPThemeStateDisabled);
 
     [self setNeedsLayout];
     [self setNeedsDisplay:YES];
@@ -447,7 +486,7 @@ CPSegmentSwitchTrackingMomentary = 2;
 */
 - (BOOL)isEnabledForSegment:(unsigned)aSegment
 {
-    return [_segments[aSegment] enabled];
+    return [[_segments objectAtIndex:aSegment] enabled];
 }
 
 /*!
@@ -457,7 +496,7 @@ CPSegmentSwitchTrackingMomentary = 2;
 */
 - (void)setTag:(int)aTag forSegment:(unsigned)aSegment
 {
-    [_segments[aSegment] setTag:aTag];
+    [[_segments objectAtIndex:aSegment] setTag:aTag];
 }
 
 /*!
@@ -466,7 +505,7 @@ CPSegmentSwitchTrackingMomentary = 2;
 */
 - (int)tagForSegment:(unsigned)aSegment
 {
-    return [_segments[aSegment] tag];
+    return [[_segments objectAtIndex:aSegment] tag];
 }
 
 // Drawings
@@ -477,10 +516,13 @@ CPSegmentSwitchTrackingMomentary = 2;
 */
 - (void)drawSegmentBezel:(int)aSegment highlight:(BOOL)shouldHighlight
 {
-    if (shouldHighlight)
-        _themeStates[aSegment] |= CPThemeStateHighlighted;
-    else
-        _themeStates[aSegment] &= ~CPThemeStateHighlighted;
+    if (aSegment < _themeStates.length)
+    {
+        if (shouldHighlight)
+            _themeStates[aSegment] = _themeStates[aSegment].and(CPThemeStateHighlighted);
+        else
+            _themeStates[aSegment] = _themeStates[aSegment].without(CPThemeStateHighlighted);
+    }
 
     [self setNeedsLayout];
     [self setNeedsDisplay:YES];
@@ -488,14 +530,12 @@ CPSegmentSwitchTrackingMomentary = 2;
 
 - (float)_leftOffsetForSegment:(unsigned)segment
 {
-    var bezelInset = [self currentValueForThemeAttribute:@"bezel-inset"];
-
     if (segment == 0)
-        return bezelInset.left;
+        return [self currentValueForThemeAttribute:@"bezel-inset"].left;
 
     var thickness = [self currentValueForThemeAttribute:@"divider-thickness"];
 
-    return [self _leftOffsetForSegment:segment - 1] + [self widthForSegment:segment - 1] + thickness;
+    return [self _leftOffsetForSegment:segment - 1] + CGRectGetWidth([self frameForSegment:segment - 1]) + thickness;
 }
 
 - (unsigned)_indexOfLastSegment
@@ -510,7 +550,7 @@ CPSegmentSwitchTrackingMomentary = 2;
 
 - (CGRect)rectForEphemeralSubviewNamed:(CPString)aName
 {
-    var height = [self currentValueForThemeAttribute:@"default-height"],
+    var height = [self currentValueForThemeAttribute:@"min-size"].height,
         contentInset = [self currentValueForThemeAttribute:@"content-inset"],
         bezelInset = [self currentValueForThemeAttribute:@"bezel-inset"],
         bounds = [self bounds];
@@ -521,15 +561,16 @@ CPSegmentSwitchTrackingMomentary = 2;
     }
     else if (aName === "right-segment-bezel")
     {
-        return CGRectMake(CGRectGetWidth([self bounds]) - contentInset.right,
-                            bezelInset.top,
-                            contentInset.right,
-                            height);
+        // we have to FLOOR the coordinates to prevent a 1px glitch in Safari
+        return CGRectMake(FLOOR(CGRectGetWidth([self bounds]) - contentInset.right),
+                          FLOOR(bezelInset.top),
+                          FLOOR(contentInset.right),
+                          FLOOR(height));
     }
     else if (aName.indexOf("segment-bezel") === 0)
     {
         var segment = parseInt(aName.substring("segment-bezel-".length), 10),
-            frame = CGRectCreateCopy([_segments[segment] frame]);
+            frame = CGRectCreateCopy([self frameForSegment:segment]);
 
         if (segment === 0)
         {
@@ -537,7 +578,7 @@ CPSegmentSwitchTrackingMomentary = 2;
             frame.size.width -= contentInset.left;
         }
 
-        if (segment === _segments.length - 1)
+        if (segment === [self segmentCount] - 1)
             frame.size.width = CGRectGetWidth([self bounds]) - contentInset.right - frame.origin.x;
 
         return frame;
@@ -545,7 +586,7 @@ CPSegmentSwitchTrackingMomentary = 2;
     else if (aName.indexOf("divider-bezel") === 0)
     {
         var segment = parseInt(aName.substring("divider-bezel-".length), 10),
-            width = [self widthForSegment:segment],
+            width = CGRectGetWidth([self frameForSegment:segment]),
             left = [self _leftOffsetForSegment:segment],
             thickness = [self currentValueForThemeAttribute:@"divider-thickness"];
 
@@ -564,19 +605,32 @@ CPSegmentSwitchTrackingMomentary = 2;
 - (CPView)createEphemeralSubviewNamed:(CPString)aName
 {
     if ([aName hasPrefix:@"segment-content"])
-        return [[_CPImageAndTextView alloc] initWithFrame:CGRectMakeZero()];
+    {
+        var view = [[_CPImageAndTextView alloc] initWithFrame:CGRectMakeZero()];
+        [view _setUsesSingleLineMode:YES];
+
+        return view;
+    }
 
     return [[CPView alloc] initWithFrame:CGRectMakeZero()];
 }
 
 - (void)layoutSubviews
 {
-    if (_segments.length <= 0)
+    if ([self segmentCount] <= 0)
         return;
 
-    var themeState = _themeStates[0];
+    var themeState = _themeStates[0],
+        isDisabled = [self hasThemeState:CPThemeStateDisabled],
+        isControlSizeSmall = [self hasThemeState:CPThemeStateControlSizeSmall],
+        isControlSizeMini = [self hasThemeState:CPThemeStateControlSizeMini];
 
-    themeState |= _themeState & CPThemeStateDisabled;
+    themeState = isDisabled ? themeState.and(CPThemeStateDisabled) : themeState;
+
+    if (isControlSizeSmall)
+        themeState = themeState.and(CPThemeStateControlSizeSmall);
+    else if (isControlSizeMini)
+        themeState = themeState.and(CPThemeStateControlSizeMini);
 
     var leftCapColor = [self valueForThemeAttribute:@"left-segment-bezel-color"
                                             inState:themeState],
@@ -589,7 +643,12 @@ CPSegmentSwitchTrackingMomentary = 2;
 
     var themeState = _themeStates[_themeStates.length - 1];
 
-    themeState |= _themeState & CPThemeStateDisabled;
+    themeState = isDisabled ? themeState.and(CPThemeStateDisabled) : themeState;
+
+    if (isControlSizeSmall)
+        themeState = themeState.and(CPThemeStateControlSizeSmall);
+    else if (isControlSizeMini)
+        themeState = themeState.and(CPThemeStateControlSizeMini);
 
     var rightCapColor = [self valueForThemeAttribute:@"right-segment-bezel-color"
                                              inState:themeState],
@@ -604,7 +663,12 @@ CPSegmentSwitchTrackingMomentary = 2;
     {
         var themeState = _themeStates[i];
 
-        themeState |= _themeState & CPThemeStateDisabled;
+        themeState = isDisabled ? themeState.and(CPThemeStateDisabled) : themeState;
+
+        if (isControlSizeSmall)
+            themeState = themeState.and(CPThemeStateControlSizeSmall);
+        else if (isControlSizeMini)
+            themeState = themeState.and(CPThemeStateControlSizeMini);
 
         var bezelColor = [self valueForThemeAttribute:@"center-segment-bezel-color"
                                               inState:themeState],
@@ -615,7 +679,6 @@ CPSegmentSwitchTrackingMomentary = 2;
 
         [bezelView setBackgroundColor:bezelColor];
 
-
         // layout image/title views
         var segment = _segments[i],
             contentView = [self layoutEphemeralSubviewNamed:@"segment-content-" + i
@@ -642,11 +705,15 @@ CPSegmentSwitchTrackingMomentary = 2;
         if (i == count - 1)
             continue;
 
-        var borderState = _themeStates[i] | _themeStates[i + 1];
 
-        borderState = (borderState & CPThemeStateSelected & ~CPThemeStateHighlighted) ? CPThemeStateSelected : CPThemeStateNormal;
+        var borderState = _themeStates[i].and(_themeStates[i + 1]);
 
-        borderState |= _themeState & CPThemeStateDisabled;
+        borderState = isDisabled ? borderState.and(CPThemeStateDisabled) : borderState;
+
+        if (isControlSizeSmall)
+            borderState = borderState.and(CPThemeStateControlSizeSmall);
+        else if (isControlSizeMini)
+            borderState = borderState.and(CPThemeStateControlSizeMini);
 
         var borderColor = [self valueForThemeAttribute:@"divider-bezel-color"
                                                inState:borderState],
@@ -669,61 +736,33 @@ CPSegmentSwitchTrackingMomentary = 2;
 {
 }
 
-- (void)tileWithChangedSegment:(unsigned)aSegment
+/*! @ignore */
+- (void)tile
 {
-    if (aSegment >= _segments.length)
+    [self tileWithChangedSegment:0];
+}
+
+/*! @ignore */
+- (void)tileWithChangedSegment:(CPInteger)aSegment
+{
+    var segmentCount = [self segmentCount];
+
+    // Corner case: when segmentCount == 0 and aSegment == 0, we do not return here because we still need to set the new frameSize bellow.
+    if (aSegment < 0 || (segmentCount > 0 && aSegment >= segmentCount))
         return;
 
-    var segment = _segments[aSegment],
-        segmentWidth = [segment width],
-        themeState = _themeStates[aSegment] | (_themeState & CPThemeStateDisabled),
-        contentInset = [self valueForThemeAttribute:@"content-inset" inState:themeState],
-        font = [self font];
+    var width = 0;
 
-    if (!segmentWidth)
+    if (segmentCount > 0)
     {
-        if ([segment image] && [segment label])
-            segmentWidth = [[segment label] sizeWithFont:font].width + [[segment image] size].width + contentInset.left + contentInset.right;
-        else if (segment.image)
-            segmentWidth = [[segment image] size].width + contentInset.left + contentInset.right;
-        else if (segment.label)
-            segmentWidth = [[segment label] sizeWithFont:font].width + contentInset.left + contentInset.right;
-        else
-            segmentWidth = 0.0;
+        // Invalidate frames for segments on the right. They will be lazily computed by -frameForSegment:.
+        for (var i = aSegment; i < segmentCount; i++)
+            [_segments[i] setFrame:CGRectMakeZero()];
+
+        width = CGRectGetMaxX([self frameForSegment:(segmentCount - 1)]);
     }
 
-    var delta = segmentWidth - CGRectGetWidth([segment frame]);
-
-    if (!delta)
-    {
-        [self setNeedsLayout];
-        [self setNeedsDisplay:YES];
-
-        return;
-    }
-
-    // Update control size
-    var frame = [self frame];
-
-    [self setFrameSize:CGSizeMake(CGRectGetWidth(frame) + delta, CGRectGetHeight(frame))];
-
-    // Update segment width
-    [segment setWidth:segmentWidth];
-    [segment setFrame:[self frameForSegment:aSegment]];
-
-    // Update following segments widths
-    var index = aSegment + 1;
-
-    for (; index < _segments.length; ++index)
-    {
-        [_segments[index] frame].origin.x += delta;
-
-        [self drawSegmentBezel:index highlight:NO];
-        [self drawSegment:index highlight:NO];
-    }
-
-    [self drawSegmentBezel:aSegment highlight:NO];
-    [self drawSegment:aSegment highlight:NO];
+    [self setFrameSize:CGSizeMake(width, CGRectGetHeight([self frame]))];
 
     [self setNeedsLayout];
     [self setNeedsDisplay:YES];
@@ -735,29 +774,58 @@ CPSegmentSwitchTrackingMomentary = 2;
 */
 - (CGRect)frameForSegment:(unsigned)aSegment
 {
-    return [self bezelFrameForSegment:aSegment];
+    var segment = [_segments objectAtIndex:aSegment],
+        frame = [segment frame];
+
+    if (CGRectEqualToRect(frame, CGRectMakeZero()))
+    {
+        frame = [self bezelFrameForSegment:aSegment];
+        [segment setFrame:frame];
+    }
+
+    return frame;
 }
 
 - (CGRect)bezelFrameForSegment:(unsigned)aSegment
 {
-    var height = [self currentValueForThemeAttribute:@"default-height"],
-        bezelInset = [self currentValueForThemeAttribute:@"bezel-inset"],
+    var left = [self _leftOffsetForSegment:aSegment],
+        top = [self currentValueForThemeAttribute:@"bezel-inset"].top,
         width = [self widthForSegment:aSegment],
-        left = [self _leftOffsetForSegment:aSegment];
+        height = [self currentValueForThemeAttribute:@"min-size"].height;
 
-    return CGRectMake(left, bezelInset.top, width, height);
+    if (width == 0)
+    {
+        var themeState = _themeState.hasThemeState(CPThemeStateDisabled) ? _themeStates[aSegment].and(CPThemeStateDisabled) : _themeStates[aSegment],
+            contentInset = [self valueForThemeAttribute:@"content-inset" inState:themeState],
+            contentInsetWidth = contentInset.left + contentInset.right,
+
+            segment = _segments[aSegment],
+            label = [segment label],
+            image = [segment image];
+
+        // add 1 pixel to account for possible fractional pixels at right edge
+        width = (label ? [label sizeWithFont:[self font]].width + 1 : 4.0) + (image ? [image size].width : 0) + contentInsetWidth;
+    }
+
+    return CGRectMake(left, top, width, height);
 }
 
 - (CGRect)contentFrameForSegment:(unsigned)aSegment
 {
-    var height = [self currentValueForThemeAttribute:@"default-height"],
+    var height = [self currentValueForThemeAttribute:@"min-size"].height,
         contentInset = [self currentValueForThemeAttribute:@"content-inset"],
-        width = [self widthForSegment:aSegment],
+        width = CGRectGetWidth([self frameForSegment:aSegment]),
         left = [self _leftOffsetForSegment:aSegment];
 
     return CGRectMake(left + contentInset.left, contentInset.top, width - contentInset.left - contentInset.right, height - contentInset.top - contentInset.bottom);
 }
 
+- (CGSize)_minimumFrameSize
+{
+    // The current width is always the minimum width.
+    return CGSizeMake(CGRectGetWidth([self frame]), [self currentValueForThemeAttribute:@"min-size"].height);
+}
+
 /*!
     Returns the segment that is hit by the specified point.
     @param aPoint the point to test for a segment hit
@@ -766,19 +834,19 @@ CPSegmentSwitchTrackingMomentary = 2;
 - (unsigned)testSegment:(CGPoint)aPoint
 {
     var location = [self convertPoint:aPoint fromView:nil],
-        count = _segments.length;
+        count = [self segmentCount];
 
     while (count--)
-        if (CGRectContainsPoint([_segments[count] frame], aPoint))
+        if (CGRectContainsPoint([self frameForSegment:count], aPoint))
             return count;
 
-    if (_segments.length)
+    if ([self segmentCount])
     {
-        var adjustedLastFrame = CGRectCreateCopy([_segments[_segments.length - 1] frame]);
+        var adjustedLastFrame = CGRectCreateCopy([self frameForSegment:(_segments.length - 1)]);
         adjustedLastFrame.size.width = CGRectGetWidth([self bounds]) - adjustedLastFrame.origin.x;
 
         if (CGRectContainsPoint(adjustedLastFrame, aPoint))
-            return _segments.length - 1;
+            return [self segmentCount] - 1;
     }
 
     return -1;
@@ -806,64 +874,68 @@ CPSegmentSwitchTrackingMomentary = 2;
     var type = [anEvent type],
         location = [self convertPoint:[anEvent locationInWindow] fromView:nil];
 
-    if (type == CPLeftMouseUp)
+    switch (type)
     {
-        if (_trackingSegment == -1)
+        case CPLeftMouseUp:
+
+            if (_trackingSegment === CPNotFound)
+                return;
+
+            if (_trackingSegment === [self testSegment:location])
+            {
+                if (_trackingMode == CPSegmentSwitchTrackingSelectAny)
+                {
+                    [self setSelected:![self isSelectedForSegment:_trackingSegment] forSegment:_trackingSegment];
+
+                    // With ANY, _selectedSegment means last pressed.
+                    _selectedSegment = _trackingSegment;
+                }
+                else
+                    [self setSelected:YES forSegment:_trackingSegment];
+
+                [self sendAction:[self action] to:[self target]];
+
+                if (_trackingMode == CPSegmentSwitchTrackingMomentary)
+                {
+                    [self setSelected:NO forSegment:_trackingSegment];
+
+                    _selectedSegment = CPNotFound;
+                }
+            }
+
+            [self drawSegmentBezel:_trackingSegment highlight:NO];
+
+            _trackingSegment = CPNotFound;
+
             return;
 
-        if (_trackingSegment === [self testSegment:location])
-        {
-            if (_trackingMode == CPSegmentSwitchTrackingSelectAny)
+        case CPLeftMouseDown:
+
+            var trackingSegment = [self testSegment:location];
+            if (trackingSegment > CPNotFound && [self isEnabledForSegment:trackingSegment])
             {
-                [self setSelected:![self isSelectedForSegment:_trackingSegment] forSegment:_trackingSegment];
-
-                // With ANY, _selectedSegment means last pressed.
-                _selectedSegment = _trackingSegment;
+                _trackingHighlighted = YES;
+                _trackingSegment = trackingSegment;
+                [self drawSegmentBezel:_trackingSegment highlight:YES];
             }
-            else
-                [self setSelected:YES forSegment:_trackingSegment];
 
-            [self sendAction:[self action] to:[self target]];
+            break;
 
-            if (_trackingMode == CPSegmentSwitchTrackingMomentary)
+        case CPLeftMouseDragged:
+
+            if (_trackingSegment === CPNotFound)
+                return;
+
+            var highlighted = [self testSegment:location] === _trackingSegment;
+
+            if (highlighted != _trackingHighlighted)
             {
-                [self setSelected:NO forSegment:_trackingSegment];
+                _trackingHighlighted = highlighted;
 
-                _selectedSegment = -1;
+                [self drawSegmentBezel:_trackingSegment highlight:_trackingHighlighted];
             }
-        }
 
-        [self drawSegmentBezel:_trackingSegment highlight:NO];
-
-        _trackingSegment = -1;
-
-        return;
-    }
-
-    if (type == CPLeftMouseDown)
-    {
-        var trackingSegment = [self testSegment:location];
-        if (trackingSegment > -1 && [self isEnabledForSegment:trackingSegment])
-        {
-            _trackingHighlighted = YES;
-            _trackingSegment = trackingSegment;
-            [self drawSegmentBezel:_trackingSegment highlight:YES];
-        }
-    }
-
-    else if (type == CPLeftMouseDragged)
-    {
-        if (_trackingSegment == -1)
-            return;
-
-        var highlighted = [self testSegment:location] === _trackingSegment;
-
-        if (highlighted != _trackingHighlighted)
-        {
-            _trackingHighlighted = highlighted;
-
-            [self drawSegmentBezel:_trackingSegment highlight:_trackingHighlighted];
-        }
+            break;
     }
 
     [CPApp setTarget:self selector:@selector(trackSegment:) forNextEventMatchingMask:CPLeftMouseDraggedMask | CPLeftMouseUpMask untilDate:nil inMode:nil dequeue:YES];
@@ -873,7 +945,7 @@ CPSegmentSwitchTrackingMomentary = 2;
 {
     [super setFont:aFont];
 
-    [self tileWithChangedSegment:0];
+    [self tile];
 }
 
 @end
@@ -905,28 +977,49 @@ var CPSegmentedControlSegmentsKey       = "CPSegmentedControlSegmentsKey",
         if ([aCoder containsValueForKey:CPSegmentedControlSelectedKey])
             _selectedSegment = [aCoder decodeIntForKey:CPSegmentedControlSelectedKey];
         else
-            _selectedSegment = -1;
+            _selectedSegment = CPNotFound;
 
         if ([aCoder containsValueForKey:CPSegmentedControlTrackingModeKey])
             _trackingMode = [aCoder decodeIntForKey:CPSegmentedControlTrackingModeKey];
         else
             _trackingMode = CPSegmentSwitchTrackingSelectOne;
 
-        // HACK
-
-        for (var i = 0; i < _segments.length; i++)
-        {
+        // Here we update the themeStates array for each segments to know if there are selected or not
+        for (var i = 0; i < [self segmentCount]; i++)
             _themeStates[i] = [_segments[i] selected] ? CPThemeStateSelected : CPThemeStateNormal;
-            [self tileWithChangedSegment:i];
+
+        [self tile];
+
+        var thickness = [self currentValueForThemeAttribute:@"divider-thickness"],
+            dividerExtraSpace = ([_segments count] - 1) * thickness,
+            difference = MAX(originalWidth - [self frame].size.width - dividerExtraSpace, 0.0),
+            remainingWidth = FLOOR(difference / [self segmentCount]),
+            widthOfAllSegments = 0;
+
+        // We do this in a second loop because it relies on all the themeStates being set first
+        for (var i = 0; i < [self segmentCount]; i++)
+        {
+            var frame = [_segments[i] frame];
+            frame.size.width += remainingWidth;
+
+            widthOfAllSegments += CGRectGetWidth(frame);
         }
 
-        var difference = MAX(originalWidth - [self frame].size.width, 0.0),
-            remainingWidth = FLOOR(difference / _segments.length);
+        // Here we handle the leftovers pixel, and we will add one pixel to each segment cell till we have the same size as the originalSize.
+        // This is needed to have a perfect/same alignment between our application and xCode.
+        var leftOversPixel = originalWidth - (widthOfAllSegments + dividerExtraSpace);
 
-        for (var i = 0; i < _segments.length; i++)
-            [self setWidth:[_segments[i] width] + remainingWidth forSegment:i];
+        // Make sure we don't make an out of range
+        if (leftOversPixel < [self segmentCount] - 1)
+        {
+            for (var i = 0; i < leftOversPixel; i++)
+            {
+                [_segments[i] frame].size.width += 1;
+            }
+        }
 
-        [self tileWithChangedSegment:0];
+        [self setFrameSize:CGSizeMake(originalWidth, CGRectGetHeight([self frame]))];
+        [self tile];
     }
 
     return self;
@@ -944,31 +1037,48 @@ var CPSegmentedControlSegmentsKey       = "CPSegmentedControlSegmentsKey",
 
 @end
 
-var CPSegmentedControlBindersMap = {},
-    CPSegmentedControlNoSelectionPlaceholder = "CPSegmentedControlNoSelectionPlaceholder";
+@implementation CPSegmentedControl (BindingSupport)
+
++ (Class)_binderClassForBinding:(CPString)aBinding
+{
+    if ([self _isSelectionBinding:aBinding])
+        return [_CPSegmentedControlBinder class];
+
+    return [super _binderClassForBinding:aBinding];
+}
+
++ (BOOL)_isSelectionBinding:(CPString)aBinding
+{
+    return (aBinding === CPSelectedIndexBinding || aBinding === CPSelectedLabelBinding || aBinding === CPSelectedTagBinding);
+}
+
++ (BOOL)isBindingExclusive:(CPString)aBinding
+{
+    return [self _isSelectionBinding:aBinding];
+}
+
+- (void)bind:(CPString)aBinding toObject:(id)anObject withKeyPath:(CPString)aKeyPath options:(CPDictionary)options
+{
+    if ([[self class] _isSelectionBinding:aBinding] && _trackingMode !== CPSegmentSwitchTrackingSelectOne)
+    {
+        CPLog.warn("Binding " + aBinding + " needs CPSegmentSwitchTrackingSelectOne tracking mode");
+        return;
+    }
+
+    [super bind:aBinding toObject:anObject withKeyPath:aKeyPath options:options];
+}
+
+- (void)_reverseSetBinding
+{
+    [_CPSegmentedControlBinder _reverseSetValueFromExclusiveBinderForObject:self];
+}
+
+@end
+
+var CPSegmentedControlNoSelectionPlaceholder = "CPSegmentedControlNoSelectionPlaceholder";
 
 @implementation _CPSegmentedControlBinder : CPBinder
 {
-    CPString _selectionBinding @accessors(readonly, getter=selectionBinding);
-}
-
-+ (void)reverseSetValueForObject:(id)aSource
-{
-    var binder = CPSegmentedControlBindersMap[[aSource UID]];
-    [binder reverseSetValueFor:[binder selectionBinding]];
-}
-
-- (id)initWithBinding:(CPString)aBinding name:(CPString)aName to:(id)aDestination keyPath:(CPString)aKeyPath options:(CPDictionary)options from:(id)aSource
-{
-    self = [super initWithBinding:aBinding name:aName to:aDestination keyPath:aKeyPath options:options from:aSource];
-
-    if (self)
-    {
-        CPSegmentedControlBindersMap[[aSource UID]] = self;
-        _selectionBinding = aName;
-    }
-
-    return self;
 }
 
 - (void)_updatePlaceholdersWithOptions:(CPDictionary)options

AppKit/CPShadow.j

@@ -22,6 +22,9 @@
 
 @import <Foundation/CPObject.j>
 
+@import "CGGeometry.j"
+@import "CPColor.j"
+@import "CPGraphicsContext.j"
 
 /*!
     @deprecated
@@ -31,9 +34,9 @@
 */
 @implementation CPShadow : CPObject
 {
-    CGSize      _offset @accessors(property=shadowOffset);
+    CGSize      _offset     @accessors(property=shadowOffset);
     float       _blurRadius @accessors(property=shadowBlurRadius);
-    CPColor     _color @accessors(property=shadowColor);
+    CPColor     _color      @accessors(property=shadowColor);
 }
 
 /*!

AppKit/CPShadowView.j

@@ -26,7 +26,7 @@
 @import "CPImage.j"
 @import "CPView.j"
 
-
+@typedef CPShadowWeight
 CPLightShadow   = 0;
 CPHeavyShadow   = 1;
 

AppKit/CPSound.j

@@ -23,6 +23,19 @@
 @import <Foundation/CPObject.j>
 @import <Foundation/CPRunLoop.j>
 
+@typedef HTMLAudioElement
+
+@protocol CPSoundDelegate <CPObject>
+
+@optional
+- (void)sound:(CPSound)aSound didFinishPlaying:(BOOL)finishedLoading;
+
+@end
+
+@global document
+
+var CPSoundDelegate_sound_didFinishPlaying_ = 1 << 1;
+
 CPSoundLoadStateEmpty       = 0;
 CPSoundLoadStateLoading     = 1;
 CPSoundLoadStateCanBePlayed = 2;
@@ -50,10 +63,11 @@ CPSoundPlayBackStatePause   = 2;
     HTMLAudioElement    _audioTag;
     int                 _loadStatus;
     int                 _playBackStatus;
+    unsigned            _implementedDelegateMethods;
 }
 
-#pragma mark -
-#pragma mark Initialization
+// MARK: -
+// MARK: Initialization
 
 - (id)init
 {
@@ -133,8 +147,27 @@ CPSoundPlayBackStatePause   = 2;
 }
 
 
-#pragma mark -
-#pragma mark Events listener
+// MARK: -
+// MARK: Delegate methods
+
+/*!
+    Sets the sound's delegate.
+    @param aDelegate the new delegate
+*/
+- (void)setDelegate:(id)aDelegate
+{
+    if (_delegate === aDelegate)
+        return;
+
+    _delegate = aDelegate;
+    _implementedDelegateMethods = 0;
+
+    if ([_delegate respondsToSelector:@selector(sound:didFinishPlaying:)])
+        _implementedDelegateMethods |= CPSoundDelegate_sound_didFinishPlaying_;
+}
+
+// MARK: -
+// MARK: Events listener
 
 /*! @ignore
 */
@@ -166,8 +199,8 @@ CPSoundPlayBackStatePause   = 2;
 }
 
 
-#pragma mark -
-#pragma mark Media controls
+// MARK: -
+// MARK: Media controls
 
 /*!
     Play the sound.
@@ -207,8 +240,7 @@ CPSoundPlayBackStatePause   = 2;
     _audioTag.currentTime = 0.0;
     _playBackStatus = CPSoundPlayBackStateStop;
 
-    if (_delegate && [_delegate respondsToSelector:@selector(sound:didFinishPlaying:)])
-        [_delegate sound:self didFinishPlaying:YES];
+    [self _sendDelegateSoundDidFinishPlaying:YES];
 
     return YES;
 }
@@ -292,8 +324,8 @@ CPSoundPlayBackStatePause   = 2;
     _audioTag.volume = aVolume;
 }
 
-#pragma mark -
-#pragma mark Accessors
+// MARK: -
+// MARK: Accessors
 
 /*!
     Returns the duration in seconds of the sound.
@@ -316,3 +348,20 @@ CPSoundPlayBackStatePause   = 2;
 }
 
 @end
+
+
+@implementation CPSound (CPSoundDelegate)
+
+/*!
+    @ignore
+    Call delegate sound:didFinishPlaying:
+*/
+- (void)_sendDelegateSoundDidFinishPlaying:(BOOL)finishedPlaying
+{
+    if (!(_implementedDelegateMethods & CPSoundDelegate_sound_didFinishPlaying_))
+        return;
+
+    [_delegate sound:self didFinishPlaying:finishedPlaying];
+}
+
+@end

AppKit/CPSplitViewController.j

@@ -0,0 +1,388 @@
+/*
+ * CPSplitViewController.j
+ *
+ * Created by Daniel Boehringer on September 2, 2025.
+ * Copyright (c) 2025 Daniel Boehringer. All rights reserved.
+ *
+ * This library is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 2.1 of the License, or (at your option) any later version.
+ *
+ * This library is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this library; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
+ */
+
+@import "CPViewController.j"
+@import "CPSplitView.j"
+
+var CPSplitViewControllerAutomaticDimension = -1.0;
+
+/**
+ * A container view controller that manages two or more child view
+ * controllers in a split view interface.
+ *
+ * This class provides a controller-level abstraction for CPSplitView,
+ * managing the addition, removal, and arrangement of view controllers
+ * through CPSplitViewItem instances.
+ *
+ * This implementation was synthesized with the assistance of an LLM,
+ * directed by the author.
+ */
+@implementation CPSplitViewController : CPViewController <CPSplitViewDelegate>
+{
+    /** @private The underlying split view that arranges the child views. */
+    CPSplitView         _splitView;
+
+    /** @private An array of CPSplitViewItem objects managed by this controller. */
+    CPMutableArray      _splitViewItems;
+
+    /** @private The minimum thickness for sidebars to be displayed inline. */
+    CPNumber            _minimumThicknessForInlineSidebars;
+}
+
+// MARK: - Initialization
+
+- (id)init
+{
+    if (self = [super init])
+    {
+        _splitViewItems = [CPMutableArray array];
+        _minimumThicknessForInlineSidebars = 20.0;
+    }
+    return self;
+}
+
+// MARK: - View Lifecycle
+
+- (void)loadView
+{
+    if (!_splitView)
+    {
+        _splitView = [[CPSplitView alloc] initWithFrame:CGRectMake(0,0,400,400)];
+        [_splitView setDelegate:self];
+    }
+    [self setView:_splitView];
+}
+
+- (void)viewDidLoad
+{
+    [super viewDidLoad];
+    for (var i = 0; i < [_splitViewItems count]; i++)
+    {
+        var viewController = [[_splitViewItems objectAtIndex:i] viewController];
+        [[self splitView] addArrangedSubview:[viewController view]];
+    }
+}
+
+// MARK: - Accessors
+
+/**
+ * Returns the CPSplitView instance managed by the controller.
+ *
+ * @returns {CPSplitView} The split view.
+ */
+- (CPSplitView)splitView
+{
+    return _splitView;
+}
+
+/**
+ * Sets a custom split view for the controller.
+ *
+ * @param {CPSplitView} splitView The custom split view to use.
+ */
+- (void)setSplitView:(CPSplitView)splitView
+{
+    if (_splitView !== splitView)
+    {
+        _splitView = splitView;
+        [_splitView setDelegate:self];
+        if ([self isViewLoaded])
+            [self setView:_splitView];
+    }
+}
+
+/**
+ * Returns the array of split view items.
+ *
+ * @returns {CPArray} The array of CPSplitViewItem objects.
+ */
+- (CPArray)splitViewItems
+{
+    return _splitViewItems;
+}
+
+/**
+ * Sets the array of split view items, replacing any existing items.
+ *
+ * @param {CPArray} splitViewItems An array of CPSplitViewItem objects.
+ */
+- (void)setSplitViewItems:(CPArray)splitViewItems
+{
+    // Remove all existing items
+    while ([_splitViewItems count] > 0)
+    {
+        [self removeSplitViewItem:[_splitViewItems lastObject]];
+    }
+
+    // Add new items
+    for (var i = 0; i < [splitViewItems count]; i++)
+    {
+        [self addSplitViewItem:[splitViewItems objectAtIndex:i]];
+    }
+}
+
+// MARK: - Managing Split View Items
+
+/**
+ * Adds a split view item to the end of the split view.
+ *
+ * @param {CPSplitViewItem} splitViewItem The split view item to add.
+ */
+- (void)addSplitViewItem:(CPSplitViewItem)splitViewItem
+{
+    [self insertSplitViewItem:splitViewItem atIndex:[_splitViewItems count]];
+}
+
+/**
+ * Inserts a split view item at a specific index.
+ *
+ * @param {CPSplitViewItem} splitViewItem The split view item to insert.
+ * @param {CPInteger} index The zero-based index at which to insert the item.
+ */
+- (void)insertSplitViewItem:(CPSplitViewItem)splitViewItem atIndex:(CPInteger)index
+{
+    [splitViewItem _setSplitViewController:self];
+    [_splitViewItems insertObject:splitViewItem atIndex:index];
+    [self addChildViewController:[splitViewItem viewController]];
+
+    if ([self isViewLoaded])
+        [[self splitView] insertArrangedSubview:[[splitViewItem viewController] view] atIndex:index];
+}
+
+/**
+ * Removes the specified split view item.
+ *
+ * @param {CPSplitViewItem} splitViewItem The split view item to remove.
+ */
+- (void)removeSplitViewItem:(CPSplitViewItem)splitViewItem
+{
+    var viewController = [splitViewItem viewController];
+    if ([self isViewLoaded])
+        [[viewController view] removeFromSuperview];
+
+    [viewController removeFromParentViewController];
+    [splitViewItem _setSplitViewController:nil];
+    [_splitViewItems removeObject:splitViewItem];
+}
+
+/**
+ * Retrieves the split view item associated with a given view controller.
+ *
+ * @param {CPViewController} viewController The view controller to find.
+ * @returns {CPSplitViewItem | null} The corresponding split view item, or nil if not found.
+ */
+- (CPSplitViewItem)splitViewItemForViewController:(CPViewController)viewController
+{
+    for (var i = 0; i < [_splitViewItems count]; i++)
+    {
+        var item = [_splitViewItems objectAtIndex:i];
+        if ([item viewController] === viewController)
+            return item;
+    }
+    return nil;
+}
+
+// MARK: - Managing Sidebars and Inspectors
+
+/**
+ * Toggles the collapsed state of the first split view item, typically a sidebar.
+ *
+ * @param {id} sender The object that initiated the action.
+ */
+- (void)toggleSidebar:(id)sender
+{
+    if ([_splitViewItems count] > 0)
+    {
+        var sidebarItem = [_splitViewItems objectAtIndex:0];
+        [sidebarItem setCollapsed:![sidebarItem isCollapsed]];
+    }
+}
+
+/**
+ * Toggles the collapsed state of the last split view item, typically an inspector.
+ *
+ * @param {id} sender The object that initiated the action.
+ */
+- (void)toggleInspector:(id)sender
+{
+    if ([_splitViewItems count] > 1)
+    {
+        var inspectorItem = [_splitViewItems lastObject];
+        [inspectorItem setCollapsed:![inspectorItem isCollapsed]];
+    }
+}
+
+/**
+ * Returns the minimum thickness for sidebars to be displayed inline.
+ *
+ * @returns {CPNumber} The minimum thickness.
+ */
+- (CPNumber)minimumThicknessForInlineSidebars
+{
+    return _minimumThicknessForInlineSidebars;
+}
+
+// MARK: - CPSplitViewDelegate Methods
+
+// Note: A more complete implementation would forward these delegate methods
+// to a separate delegate property on the CPSplitViewController itself.
+// For now, these are stubbed to demonstrate where they would be handled.
+
+- (BOOL)splitView:(CPSplitView)splitView canCollapseSubview:(CPView)subview
+{
+    // Default behavior: allow all subviews to be collapsed.
+    return YES;
+}
+
+- (CGFloat)splitView:(CPSplitView)splitView constrainMinCoordinate:(CGFloat)proposedMinimumPosition ofSubviewAt:(CPInteger)dividerIndex
+{
+    return proposedMinimumPosition;
+}
+
+- (CGFloat)splitView:(CPSplitView)splitView constrainMaxCoordinate:(CGFloat)proposedMaximumPosition ofSubviewAt:(CPInteger)dividerIndex
+{
+    return proposedMaximumPosition;
+}
+
+- (CGRect)splitView:(CPSplitView)splitView effectiveRect:(CGRect)proposedEffectiveRect forDrawnRect:(CGRect)drawnRect ofDividerAtIndex:(CPInteger)dividerIndex
+{
+    // Default behavior: return the proposed rectangle.
+    // This can be overridden to provide a larger or custom hit area for the divider.
+    return proposedEffectiveRect;
+}
+
+- (void)splitViewDidResizeSubviews:(CPNotification)notification
+{
+    // Can be used to respond to user-initiated resizing.
+}
+
+@end
+
+/**
+ * An object that manages a view controller within a CPSplitViewController.
+ *
+ * A CPSplitViewItem acts as a wrapper around a CPViewController,
+ * maintaining properties like its collapsed state within the parent
+ * split view controller.
+ */
+@implementation CPSplitViewItem : CPObject
+{
+    /** @private The view controller managed by this item. */
+    CPViewController        _viewController;
+
+    /** @private A boolean indicating whether the item is collapsed. */
+    BOOL                    _isCollapsed;
+
+    /** @private A weak reference to the owning split view controller. */
+    CPSplitViewController   _splitViewController;
+}
+
+// MARK: - Class Methods
+
+/**
+ * Creates and returns a new split view item with the specified view controller.
+ *
+ * @param {CPViewController} viewController The view controller for the new item.
+ * @returns {instancetype} A new CPSplitViewItem instance.
+ */
++ (instancetype)splitViewItemWithViewController:(CPViewController)viewController
+{
+    return [[self alloc] initWithViewController:viewController];
+}
+
+// MARK: - Initialization
+
+/**
+ * Initializes a new split view item with the specified view controller.
+ *
+ * @param {CPViewController} viewController The view controller for the new item.
+ * @returns {id} The initialized CPSplitViewItem instance.
+ */
+- (id)initWithViewController:(CPViewController)viewController
+{
+    if (self = [super init])
+    {
+        _viewController = viewController;
+        _isCollapsed = NO;
+    }
+    return self;
+}
+
+// MARK: - Accessors
+
+/**
+ * Returns the view controller associated with the item.
+ *
+ * @returns {CPViewController} The associated view controller.
+ */
+- (CPViewController)viewController
+{
+    return _viewController;
+}
+
+/**
+ * Returns a boolean value indicating whether the item is collapsed.
+ *
+ * @returns {BOOL} YES if the item is collapsed, otherwise NO.
+ */
+- (BOOL)isCollapsed
+{
+    return _isCollapsed;
+}
+
+/**
+ * Sets the collapsed state of the item.
+ * When collapsed, the view controller's view is hidden.
+ *
+ * @param {BOOL} shouldCollapse YES to collapse the item, NO to expand it.
+ */
+- (void)setCollapsed:(BOOL)shouldCollapse
+{
+    if (_isCollapsed === shouldCollapse)
+        return;
+
+    _isCollapsed = shouldCollapse;
+    [[_viewController view] setHidden:shouldCollapse];
+}
+
+/**
+ * Returns the split view controller that owns this item.
+ *
+ * @returns {CPSplitViewController | null} The parent split view controller.
+ */
+- (CPSplitViewController)splitViewController
+{
+    return _splitViewController;
+}
+
+/**
+ * @private
+ * Sets the owning split view controller. This method is for internal use by
+ * CPSplitViewController.
+ *
+ * @param {CPSplitViewController} splitViewController The parent controller.
+ */
+- (void)_setSplitViewController:(CPSplitViewController)splitViewController
+{
+    _splitViewController = splitViewController;
+}
+
+@end

AppKit/CPStackView.j

@@ -0,0 +1,815 @@
+/*
+ * CPStackView.j
+ * AppKit
+ *
+ * Created by Daniel Boehringer.
+ * Copyright 2025, Cappuccino Project.
+ *
+ * This library is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 2.1 of the License, or (at your option) any later version.
+ *
+ * This library is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this library; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
+ */
+
+/*
+ * PLACEHOLDER IMPLEMENTATION — READ BEFORE USE OR MODIFICATION.
+ *
+ * This class lays out views by direct, procedural arithmetic. It has no
+ * constraint solver. It cannot compress, expand, or negotiate space among
+ * views the way NSStackView does; it only places views at their existing
+ * frame size, in order, separated by fixed spacing.
+ *
+ * Known, accepted limitations:
+ *   - `distribution` is stored but has no effect on layout. Fill,
+ *     FillEqually, FillProportionally, and EqualSpacing are unimplemented.
+ *   - Center-gravity views are clamped against the Leading edge only; if
+ *     Leading + Center + Trailing content overflows the container, Center
+ *     views can overlap Trailing views instead of compressing.
+ *   - `visibilityPriority:forView:` only supports the two extreme values
+ *     (MustHold / NotVisible). Intermediate priorities are accepted but
+ *     have no defined effect.
+ *   - No guarantee is made of correctness beyond what a single manual
+ *     test (Tests/Manual/CPStackViewTest) exercises: orientation, the
+ *     three gravity areas, alignment switching, spacing, and hidden-view
+ *     detachment. Insertion, removal, custom spacing, and the CPCoding
+ *     archive path are implemented but not verified by that test.
+ *
+ * This exists to give AppKit a working CPStackView symbol now, not to be
+ * a durable design. It is expected to be replaced by a constraint-solver
+ * based implementation (Kiwi.js) when time permits. Do not build on its
+ * internal layout algorithm as if it were a stable foundation.
+ */
+
+@import "CPView.j"
+@import <Foundation/CPMapTable.j>
+
+// MARK: -
+// MARK: Minimal local type definitions
+//
+// These types support this file only. They are not shared with the rest
+// of AppKit. A future constraint-solver based Auto Layout engine will
+// replace them. Numeric values match the equivalent Cocoa constants
+// (NSUserInterfaceLayoutOrientation, NSLayoutAttribute) so that a later,
+// solver-based CPLayoutAttribute can reuse these numbers without a
+// renumbering pass.
+
+@typedef CPUserInterfaceLayoutOrientation
+    CPUserInterfaceLayoutOrientationHorizontal = 0;
+    CPUserInterfaceLayoutOrientationVertical   = 1;
+
+@typedef CPLayoutAttribute
+    CPLayoutAttributeLeft      = 1;
+    CPLayoutAttributeRight     = 2;
+    CPLayoutAttributeTop       = 3;
+    CPLayoutAttributeBottom    = 4;
+    CPLayoutAttributeLeading   = 5;
+    CPLayoutAttributeTrailing  = 6;
+    CPLayoutAttributeWidth     = 7;
+    CPLayoutAttributeHeight    = 8;
+    CPLayoutAttributeCenterX   = 9;
+    CPLayoutAttributeCenterY   = 10;
+
+@typedef CPEdgeInsets
+
+/*!
+    Creates a CPEdgeInsets. Argument order matches Cocoa's NSEdgeInsetsMake
+    (top, left, bottom, right). Storage reuses the existing CGInset struct,
+    whose field order is (top, right, bottom, left).
+*/
+function CPEdgeInsetsMake(top, left, bottom, right)
+{
+    return CGInsetMake(top, right, bottom, left);
+}
+
+function CPEdgeInsetsEqualToEdgeInsets(lhsInsets, rhsInsets)
+{
+    return CGInsetEqualToInset(lhsInsets, rhsInsets);
+}
+
+// Gravity Areas
+@typedef CPStackViewGravity
+    CPStackViewGravityTop       = 1;
+    CPStackViewGravityLeading   = 1;
+    CPStackViewGravityCenter    = 2;
+    CPStackViewGravityBottom    = 3;
+    CPStackViewGravityTrailing  = 3;
+
+// Distribution (Deprecated in modern macOS, but kept for compatibility/logic)
+@typedef CPStackViewDistribution
+    CPStackViewDistributionGravityAreas         = 0;
+    CPStackViewDistributionFill                 = 1;
+    CPStackViewDistributionFillEqually          = 2;
+    CPStackViewDistributionFillProportionally   = 3;
+    CPStackViewDistributionEqualSpacing         = 4;
+    CPStackViewDistributionEqualCentering       = 5;
+
+// Visibility Priority
+@typedef CPStackViewVisibilityPriority
+    CPStackViewVisibilityPriorityMustHold       = 1000.0;
+    CPStackViewVisibilityPriorityNotVisible     = 0.0;
+
+var CPStackViewSpacingUseDefault = 3.40282347e+38; // FLT_MAX
+
+/*!
+    @ingroup appkit
+    @class CPStackView
+
+    CPStackView arranges an array of views horizontally or vertically and updates
+    their placement and sizing when the window size changes.
+ 
+    Unlike a simple list, CPStackView supports "Gravity Areas" (Leading, Center, Trailing),
+    allowing you to pin groups of views to specific sections of the layout.
+*/
+@implementation CPStackView : CPView
+{
+    CPUserInterfaceLayoutOrientation    _orientation;
+    CPLayoutAttribute                   _alignment;
+    CPStackViewDistribution             _distribution;
+    float                               _spacing;
+    CPEdgeInsets                        _edgeInsets;
+    
+    BOOL                                _detachesHiddenViews;
+    
+    // View Storage by Gravity
+    CPMutableArray                      _viewsLeading;
+    CPMutableArray                      _viewsCenter;
+    CPMutableArray                      _viewsTrailing;
+    
+    // Internal cache of all arranged subviews to maintain order for hittesting/iterating
+    CPMutableArray                      _arrangedSubviews;
+    
+    // Custom Spacing storage
+    CPMapTable                          _customSpacings;
+    
+    // Visibility Priorities
+    CPMapTable                          _visibilityPriorities;
+}
+
+// MARK: -
+// MARK: Initialization
+
++ (CPStackView)stackViewWithViews:(CPArray)views
+{
+    var stackView = [[CPStackView alloc] initWithFrame:CGRectMakeZero()];
+    
+    for (var i = 0, count = [views count]; i < count; i++)
+        [stackView addView:views[i] inGravity:CPStackViewGravityLeading];
+        
+    return stackView;
+}
+
+- (id)initWithFrame:(CGRect)aFrame
+{
+    if (self = [super initWithFrame:aFrame])
+    {
+        _orientation = CPUserInterfaceLayoutOrientationHorizontal;
+        _alignment = CPLayoutAttributeCenterY; // Default alignment
+        _distribution = CPStackViewDistributionGravityAreas;
+        _spacing = 8.0; // Default Cocoa spacing
+        _edgeInsets = CPEdgeInsetsMake(0, 0, 0, 0);
+        _detachesHiddenViews = YES;
+        
+        _viewsLeading = [[CPMutableArray alloc] init];
+        _viewsCenter = [[CPMutableArray alloc] init];
+        _viewsTrailing = [[CPMutableArray alloc] init];
+        _arrangedSubviews = [[CPMutableArray alloc] init];
+        
+        _customSpacings = [[CPMapTable alloc] init];
+        _visibilityPriorities = [[CPMapTable alloc] init];
+    }
+    return self;
+}
+
+// MARK: -
+// MARK: Configuration
+
+/*!
+    The horizontal or vertical layout direction of the stack view.
+*/
+- (CPUserInterfaceLayoutOrientation)orientation
+{
+    return _orientation;
+}
+
+- (void)setOrientation:(CPUserInterfaceLayoutOrientation)anOrientation
+{
+    if (_orientation === anOrientation)
+        return;
+        
+    _orientation = anOrientation;
+    
+    // Reset default alignment based on new orientation if needed, 
+    // though usually developer sets alignment explicitly.
+    // If switching to Vertical, CenterY makes less sense, usually CenterX.
+    if (_orientation === CPUserInterfaceLayoutOrientationVertical)
+    {
+        if (_alignment === CPLayoutAttributeCenterY) 
+            _alignment = CPLayoutAttributeCenterX;
+    }
+    else
+    {
+        if (_alignment === CPLayoutAttributeCenterX) 
+            _alignment = CPLayoutAttributeCenterY;
+    }
+
+    [self setNeedsLayout:YES];
+}
+
+/*!
+    The view alignment within the stack view.
+    Common values:
+    Horizontal: CPLayoutAttributeTop, CPLayoutAttributeBottom, CPLayoutAttributeCenterY, CPLayoutAttributeHeight (fill)
+    Vertical:   CPLayoutAttributeLeading, CPLayoutAttributeTrailing, CPLayoutAttributeCenterX, CPLayoutAttributeWidth (fill)
+*/
+- (CPLayoutAttribute)alignment
+{
+    return _alignment;
+}
+
+- (void)setAlignment:(CPLayoutAttribute)anAlignment
+{
+    if (_alignment === anAlignment)
+        return;
+    
+    _alignment = anAlignment;
+    [self setNeedsLayout:YES];
+}
+
+/*!
+    The distribution mode for the stack view.
+    @note Not yet applied to layout. All views are laid out at their
+    existing frame size regardless of this value, pending the
+    constraint-solver based layout engine. The value is stored and
+    returned so client code can read back what was set.
+*/
+- (CPStackViewDistribution)distribution
+{
+    return _distribution;
+}
+
+- (void)setDistribution:(CPStackViewDistribution)aDistribution
+{
+    if (_distribution === aDistribution)
+        return;
+        
+    _distribution = aDistribution;
+    [self setNeedsLayout:YES];
+}
+
+/*!
+    The minimum spacing, in points, between adjacent views in the stack view.
+*/
+- (float)spacing
+{
+    return _spacing;
+}
+
+- (void)setSpacing:(float)aSpacing
+{
+    if (_spacing === aSpacing)
+        return;
+        
+    _spacing = aSpacing;
+    [self setNeedsLayout:YES];
+}
+
+/*!
+    The geometric padding, in points, inside the stack view, surrounding its views.
+*/
+- (CPEdgeInsets)edgeInsets
+{
+    return _edgeInsets;
+}
+
+- (void)setEdgeInsets:(CPEdgeInsets)insets
+{
+    if (CPEdgeInsetsEqualToEdgeInsets(_edgeInsets, insets))
+        return;
+        
+    _edgeInsets = insets;
+    [self setNeedsLayout:YES];
+}
+
+/*!
+    A Boolean value that indicates whether the stack view removes hidden views from its view hierarchy.
+*/
+- (BOOL)detachesHiddenViews
+{
+    return _detachesHiddenViews;
+}
+
+- (void)setDetachesHiddenViews:(BOOL)shouldDetach
+{
+    if (_detachesHiddenViews === shouldDetach)
+        return;
+        
+    _detachesHiddenViews = shouldDetach;
+    [self setNeedsLayout:YES];
+}
+
+// MARK: -
+// MARK: Managing Views in Gravity Areas
+
+- (CPArray)_containerForGravity:(CPStackViewGravity)gravity
+{
+    if (gravity === CPStackViewGravityCenter)
+        return _viewsCenter;
+    else if (gravity === CPStackViewGravityTrailing) // or Bottom
+        return _viewsTrailing;
+        
+    return _viewsLeading; // Leading or Top
+}
+
+/*!
+    Rebuilds _arrangedSubviews from the three gravity containers, in
+    Leading, Center, Trailing order. Call after any change to a gravity
+    container so _arrangedSubviews stays a correct, single source of truth
+    for ordering, rather than an incrementally and separately maintained
+    (and error-prone) copy.
+*/
+- (void)_rebuildArrangedSubviews
+{
+    _arrangedSubviews = [[CPMutableArray alloc] init];
+    [_arrangedSubviews addObjectsFromArray:_viewsLeading];
+    [_arrangedSubviews addObjectsFromArray:_viewsCenter];
+    [_arrangedSubviews addObjectsFromArray:_viewsTrailing];
+}
+
+/*!
+    Adds a view to the end of the stack view gravity area.
+*/
+- (void)addView:(CPView)aView inGravity:(CPStackViewGravity)gravity
+{
+    var container = [self _containerForGravity:gravity];
+    
+    // Check if view is already in a container
+    if ([_arrangedSubviews containsObject:aView])
+        [self removeView:aView];
+        
+    [container addObject:aView];
+    [self _rebuildArrangedSubviews];
+    
+    // Add as actual subview
+    if ([aView superview] !== self)
+        [self addSubview:aView];
+        
+    [self setNeedsLayout:YES];
+}
+
+/*!
+    Adds a view to a stack view gravity area at a specified index position.
+*/
+- (void)insertView:(CPView)aView atIndex:(CPInteger)index inGravity:(CPStackViewGravity)gravity
+{
+    var container = [self _containerForGravity:gravity];
+    
+    if ([_arrangedSubviews containsObject:aView])
+        [self removeView:aView];
+        
+    if (index >= [container count])
+        [container addObject:aView];
+    else
+        [container insertObject:aView atIndex:index];
+        
+    [self _rebuildArrangedSubviews];
+    
+    if ([aView superview] !== self)
+        [self addSubview:aView];
+        
+    [self setNeedsLayout:YES];
+}
+
+/*!
+    Specifies an array of views for a specified gravity area in the stack view, replacing any previous views in that area.
+*/
+- (void)setViews:(CPArray)views inGravity:(CPStackViewGravity)gravity
+{
+    var container = [self _containerForGravity:gravity];
+    
+    // Remove old views from superview
+    for (var i = 0; i < [container count]; i++)
+        [container[i] removeFromSuperview];
+    
+    [container removeAllObjects];
+    
+    for (var i = 0; i < [views count]; i++)
+    {
+        var newView = views[i];
+        [container addObject:newView];
+        [self addSubview:newView];
+    }
+    
+    [self _rebuildArrangedSubviews];
+    [self setNeedsLayout:YES];
+}
+
+/*!
+    Removes a specified view from the stack view.
+*/
+- (void)removeView:(CPView)aView
+{
+    if (![_arrangedSubviews containsObject:aView])
+        return;
+        
+    [_viewsLeading removeObject:aView];
+    [_viewsCenter removeObject:aView];
+    [_viewsTrailing removeObject:aView];
+    [self _rebuildArrangedSubviews];
+    
+    [aView removeFromSuperview];
+    
+    [self setNeedsLayout:YES];
+}
+
+/*!
+    Returns the array of views in the specified gravity area in the stack view.
+*/
+- (CPArray)viewsInGravity:(CPStackViewGravity)gravity
+{
+    return [[self _containerForGravity:gravity] copy];
+}
+
+/*!
+    The array of views arranged by the stack view.
+*/
+- (CPArray)arrangedSubviews
+{
+    return [_arrangedSubviews copy];
+}
+
+/*!
+    Adds the specified view to the end of the arranged subviews list.
+    (Defaults to Leading gravity if not specified).
+*/
+- (void)addArrangedSubview:(CPView)view
+{
+    [self addView:view inGravity:CPStackViewGravityLeading];
+}
+
+/*!
+    Removes the provided view from the stack’s array of arranged subviews.
+*/
+- (void)removeArrangedSubview:(CPView)view
+{
+    [self removeView:view];
+}
+
+// MARK: -
+// MARK: Custom Spacing
+
+- (float)customSpacingAfterView:(CPView)aView
+{
+    var val = [_customSpacings objectForKey:aView];
+    if (val)
+        return [val floatValue];
+        
+    return CPStackViewSpacingUseDefault;
+}
+
+- (void)setCustomSpacing:(float)spacing afterView:(CPView)aView
+{
+    if (spacing === CPStackViewSpacingUseDefault)
+        [_customSpacings removeObjectForKey:aView];
+    else
+        [_customSpacings setObject:spacing forKey:aView];
+        
+    [self setNeedsLayout:YES];
+}
+
+- (float)_spacingAfterView:(CPView)aView
+{
+    var custom = [self customSpacingAfterView:aView];
+    if (custom !== CPStackViewSpacingUseDefault)
+        return custom;
+    return _spacing;
+}
+
+// MARK: -
+// MARK: Visibility Priority
+
+- (void)setVisibilityPriority:(float)priority forView:(CPView)aView
+{
+    [_visibilityPriorities setObject:priority forKey:aView];
+    
+    if (priority === CPStackViewVisibilityPriorityNotVisible)
+    {
+        [aView setHidden:YES];
+    }
+    else if (priority === CPStackViewVisibilityPriorityMustHold)
+    {
+        [aView setHidden:NO];
+    }
+    // Note: Intermediate priorities require complex constraint logic 
+    // or a multi-pass layout system to determine fitting, which is 
+    // simplified here to basic Hidden/Visible states.
+    
+    [self setNeedsLayout:YES];
+}
+
+- (float)visibilityPriorityForView:(CPView)aView
+{
+    var val = [_visibilityPriorities objectForKey:aView];
+    if (val)
+        return [val floatValue];
+    return CPStackViewVisibilityPriorityMustHold;
+}
+
+// MARK: -
+// MARK: Layout
+
+- (void)resizeSubviewsWithOldSize:(CGSize)oldSize
+{
+    [self layoutSubviews];
+}
+
+- (void)layoutSubviews
+{
+    if (_orientation === CPUserInterfaceLayoutOrientationVertical)
+        [self _layoutVertical];
+    else
+        [self _layoutHorizontal];
+}
+
+- (void)_layoutHorizontal
+{
+    var bounds = [self bounds],
+        availWidth = CGRectGetWidth(bounds) - _edgeInsets.left - _edgeInsets.right,
+        availHeight = CGRectGetHeight(bounds) - _edgeInsets.top - _edgeInsets.bottom,
+        currentX = _edgeInsets.left;
+        
+    // 1. Layout Leading Views
+    currentX = [self _layoutViews:_viewsLeading startOffset:currentX availableOrthogonalSize:availHeight direction:1];
+    
+    // 2. Layout Trailing Views
+    // We layout backwards from the right
+    var startRight = CGRectGetWidth(bounds) - _edgeInsets.right;
+    [self _layoutViews:_viewsTrailing startOffset:startRight availableOrthogonalSize:availHeight direction:-1];
+    
+    // 3. Layout Center Views
+    if ([_viewsCenter count] > 0)
+    {
+        // Calculate total width of center stack
+        var centerStackWidth = 0.0;
+        for (var i = 0; i < [_viewsCenter count]; i++)
+        {
+            var view = _viewsCenter[i];
+            if (_detachesHiddenViews && [view isHidden]) continue;
+            
+            centerStackWidth += CGRectGetWidth([view frame]);
+            if (i < [_viewsCenter count] - 1)
+                centerStackWidth += [self _spacingAfterView:view];
+        }
+        
+        var centerStart = (CGRectGetWidth(bounds) / 2.0) - (centerStackWidth / 2.0);
+        
+        // Clamp to prevent overlap with Leading (simplified collision logic)
+        // ideally stack view compresses views, but here we just shift/clip
+        if (centerStart < currentX) 
+            centerStart = currentX;
+            
+        [self _layoutViews:_viewsCenter startOffset:centerStart availableOrthogonalSize:availHeight direction:1];
+    }
+}
+
+- (void)_layoutVertical
+{
+    var bounds = [self bounds],
+        availWidth = CGRectGetWidth(bounds) - _edgeInsets.left - _edgeInsets.right,
+        availHeight = CGRectGetHeight(bounds) - _edgeInsets.top - _edgeInsets.bottom,
+        currentY = _edgeInsets.top;
+        
+    // 1. Layout Top (Leading) Views
+    currentY = [self _layoutViews:_viewsLeading startOffset:currentY availableOrthogonalSize:availWidth direction:1];
+    
+    // 2. Layout Bottom (Trailing) Views
+    var startBottom = CGRectGetHeight(bounds) - _edgeInsets.bottom;
+    [self _layoutViews:_viewsTrailing startOffset:startBottom availableOrthogonalSize:availWidth direction:-1];
+    
+    // 3. Layout Center Views
+    if ([_viewsCenter count] > 0)
+    {
+        var centerStackHeight = 0.0;
+        for (var i = 0; i < [_viewsCenter count]; i++)
+        {
+            var view = _viewsCenter[i];
+            if (_detachesHiddenViews && [view isHidden]) continue;
+            
+            centerStackHeight += CGRectGetHeight([view frame]);
+            if (i < [_viewsCenter count] - 1)
+                centerStackHeight += [self _spacingAfterView:view];
+        }
+        
+        var centerStart = (CGRectGetHeight(bounds) / 2.0) - (centerStackHeight / 2.0);
+        
+        if (centerStart < currentY)
+            centerStart = currentY;
+            
+        [self _layoutViews:_viewsCenter startOffset:centerStart availableOrthogonalSize:availWidth direction:1];
+    }
+}
+
+// Helper to layout a specific array of views in one direction
+// Returns the ending offset
+- (float)_layoutViews:(CPArray)views startOffset:(float)offset availableOrthogonalSize:(float)orthoSize direction:(int)dir
+{
+    var cursor = offset;
+    var isVert = (_orientation === CPUserInterfaceLayoutOrientationVertical);
+    
+    // If direction is -1 (Trailing/Bottom), we iterate backwards
+    // However, the standard behavior for trailing gravity is that the *last* view added is at the *end*.
+    // Leading: [A] [B] ->
+    // Trailing: -> [C] [D] (where D is rightmost)
+    // To support Trailing logic: We start at Right Edge, move left by Width(D), place D, move left by Spacing...
+    
+    var count = [views count];
+    if (count === 0) return cursor;
+    
+    // If direction is negative (Trailing), we process list in reverse order to stack them from edge inwards
+    var i = (dir === 1) ? 0 : count - 1;
+    var limit = (dir === 1) ? count : -1;
+    var step = (dir === 1) ? 1 : -1;
+    
+    // Spacing is applied as a gap *before* placing an element (except the
+    // first placed one), rather than trailing off the end after the last
+    // element. This keeps the returned cursor at the true content edge,
+    // with no phantom spacing past the final view.
+    var hasPlacedAny = false;
+    var pendingSpacing = 0;
+    
+    for (; i !== limit; i += step)
+    {
+        var view = views[i];
+        
+        if (_detachesHiddenViews && [view isHidden])
+            continue;
+            
+        if (hasPlacedAny)
+            cursor += (dir === 1) ? pendingSpacing : -pendingSpacing;
+        
+        var viewFrame = [view frame];
+        var viewSizePrimary = isVert ? CGRectGetHeight(viewFrame) : CGRectGetWidth(viewFrame);
+        
+        // Handle Alignment (Orthogonal Axis)
+        var orthoPos = 0.0;
+        var viewOrthoSize = isVert ? CGRectGetWidth(viewFrame) : CGRectGetHeight(viewFrame);
+        
+        // Apply Stretch/Fill Alignment
+        if (isVert)
+        {
+            // Vertical Stack, dealing with Width
+            if (_alignment === CPLayoutAttributeWidth || _alignment === CPLayoutAttributeLeading || _alignment === CPLayoutAttributeTrailing) 
+            {
+                // Note: CPLayoutAttributeLeading/Trailing in this context implies filling width usually, 
+                // or aligning to edges. Let's assume Width/Fill for Leading/Trailing/Left/Right 
+                // in this simplified implementation, or strictly left/right.
+                
+                if (_alignment === CPLayoutAttributeWidth || _alignment === CPLayoutAttributeLeft || _alignment === CPLayoutAttributeLeading)
+                {
+                    // Fill width if explicit, or just align left
+                    if (_alignment === CPLayoutAttributeWidth) viewOrthoSize = orthoSize;
+                    orthoPos = _edgeInsets.left;
+                }
+                else if (_alignment === CPLayoutAttributeRight || _alignment === CPLayoutAttributeTrailing)
+                {
+                    orthoPos = _edgeInsets.left + (orthoSize - viewOrthoSize);
+                }
+                else // CenterX
+                {
+                    orthoPos = _edgeInsets.left + (orthoSize - viewOrthoSize) / 2.0;
+                }
+            }
+            else // Default CenterX
+            {
+                 orthoPos = _edgeInsets.left + (orthoSize - viewOrthoSize) / 2.0;
+            }
+        }
+        else
+        {
+            // Horizontal Stack, dealing with Height
+            if (_alignment === CPLayoutAttributeHeight || _alignment === CPLayoutAttributeTop || _alignment === CPLayoutAttributeBottom)
+            {
+                if (_alignment === CPLayoutAttributeHeight)
+                {
+                    viewOrthoSize = orthoSize;
+                    orthoPos = _edgeInsets.top;
+                }
+                else if (_alignment === CPLayoutAttributeTop)
+                {
+                    orthoPos = _edgeInsets.top;
+                }
+                else if (_alignment === CPLayoutAttributeBottom)
+                {
+                    orthoPos = _edgeInsets.top + (orthoSize - viewOrthoSize);
+                }
+                else // CenterY
+                {
+                    orthoPos = _edgeInsets.top + (orthoSize - viewOrthoSize) / 2.0;
+                }
+            }
+            else // Default CenterY
+            {
+                orthoPos = _edgeInsets.top + (orthoSize - viewOrthoSize) / 2.0;
+            }
+        }
+        
+        // Calculate Position
+        var originX = 0.0, originY = 0.0;
+        var sizeW = 0.0, sizeH = 0.0;
+        
+        if (isVert)
+        {
+            // Vertical
+            sizeH = viewSizePrimary;
+            sizeW = viewOrthoSize;
+            originX = orthoPos;
+            
+            if (dir === 1) {
+                originY = cursor;
+                cursor += sizeH;
+            } else {
+                cursor -= sizeH;
+                originY = cursor;
+            }
+        }
+        else
+        {
+            // Horizontal
+            sizeW = viewSizePrimary;
+            sizeH = viewOrthoSize;
+            originY = orthoPos;
+            
+            if (dir === 1) {
+                originX = cursor;
+                cursor += sizeW;
+            } else {
+                cursor -= sizeW;
+                originX = cursor;
+            }
+        }
+        
+        [view setFrame:CGRectMake(originX, originY, sizeW, sizeH)];
+        
+        pendingSpacing = [self _spacingAfterView:view];
+        hasPlacedAny = true;
+    }
+    
+    return cursor;
+}
+
+// MARK: -
+// MARK: CPCoding
+
+- (id)initWithCoder:(CPCoder)aCoder
+{
+    self = [super initWithCoder:aCoder];
+    if (self)
+    {
+        _orientation = [aCoder decodeIntForKey:@"CPStackViewOrientation"];
+        _alignment = [aCoder decodeIntForKey:@"CPStackViewAlignment"];
+        _distribution = [aCoder decodeIntForKey:@"CPStackViewDistribution"];
+        _spacing = [aCoder decodeFloatForKey:@"CPStackViewSpacing"];
+        _edgeInsets = [aCoder decodeObjectForKey:@"CPStackViewEdgeInsets"]; // Assuming CPEdgeInsets supports obj coding or manual decode
+        if (!_edgeInsets) _edgeInsets = CPEdgeInsetsMake(0,0,0,0);
+        
+        _detachesHiddenViews = [aCoder decodeBoolForKey:@"CPStackViewDetachesHiddenViews"];
+        
+        _viewsLeading = [aCoder decodeObjectForKey:@"CPStackViewViewsLeading"] || [];
+        _viewsCenter = [aCoder decodeObjectForKey:@"CPStackViewViewsCenter"] || [];
+        _viewsTrailing = [aCoder decodeObjectForKey:@"CPStackViewViewsTrailing"] || [];
+        
+        // Rebuild arranged subviews cache
+        [self _rebuildArrangedSubviews];
+        
+        _customSpacings = [aCoder decodeObjectForKey:@"CPStackViewCustomSpacings"] || [[CPMapTable alloc] init];
+        _visibilityPriorities = [[CPMapTable alloc] init]; // usually not persisted
+    }
+    return self;
+}
+
+- (void)encodeWithCoder:(CPCoder)aCoder
+{
+    [super encodeWithCoder:aCoder];
+    [aCoder encodeInt:_orientation forKey:@"CPStackViewOrientation"];
+    [aCoder encodeInt:_alignment forKey:@"CPStackViewAlignment"];
+    [aCoder encodeInt:_distribution forKey:@"CPStackViewDistribution"];
+    [aCoder encodeFloat:_spacing forKey:@"CPStackViewSpacing"];
+    [aCoder encodeObject:_edgeInsets forKey:@"CPStackViewEdgeInsets"];
+    [aCoder encodeBool:_detachesHiddenViews forKey:@"CPStackViewDetachesHiddenViews"];
+    
+    [aCoder encodeObject:_viewsLeading forKey:@"CPStackViewViewsLeading"];
+    [aCoder encodeObject:_viewsCenter forKey:@"CPStackViewViewsCenter"];
+    [aCoder encodeObject:_viewsTrailing forKey:@"CPStackViewViewsTrailing"];
+    
+    [aCoder encodeObject:_customSpacings forKey:@"CPStackViewCustomSpacings"];
+}
+
+@end

AppKit/CPStepper.j

@@ -25,7 +25,6 @@
 @import "CPTextField.j"
 
 
-
 /*!
     CPStepper is an implementation of Cocoa NSStepper.
 
@@ -43,8 +42,8 @@
     CPButton    _buttonUp;
 }
 
-#pragma mark -
-#pragma mark Initialization
+// MARK: -
+// MARK: Initialization
 
 /*!
     Initializes a CPStepper with given values.
@@ -53,9 +52,9 @@
     @param maxValue the maximal acceptable value of the stepper
     @return Initialized CPStepper
 */
-+ (CPStepper)stepperWithInitialValue:(float)aValue minValue:(float)aMinValue maxValue:(float)aMaxValue
++ (id)stepperWithInitialValue:(float)aValue minValue:(float)aMinValue maxValue:(float)aMaxValue
 {
-    var stepper = [[CPStepper alloc] initWithFrame:CGRectMakeZero()];
+    var stepper = [[self alloc] initWithFrame:CGRectMakeZero()];
 
     [stepper setDoubleValue:aValue];
     [stepper setMinValue:aMinValue];
@@ -75,14 +74,14 @@
 
     @return Initialized CPStepper
 */
-+ (CPStepper)stepper
++ (id)stepper
 {
     return [CPStepper stepperWithInitialValue:0.0 minValue:0.0 maxValue:59.0];
 }
 
 + (Class)_binderClassForBinding:(CPString)aBinding
 {
-    if (aBinding == CPValueBinding || aBinding == CPMinValueBinding || aBinding == CPMaxValueBinding)
+    if (aBinding === CPValueBinding || aBinding === CPMinValueBinding || aBinding === CPMaxValueBinding)
         return [_CPStepperValueBinder class];
 
     return [super _binderClassForBinding:aBinding];
@@ -90,7 +89,7 @@
 
 - (CPString)_replacementKeyPathForBinding:(CPString)aBinding
 {
-    if (aBinding == CPValueBinding)
+    if (aBinding === CPValueBinding)
         return @"doubleValue";
 
     return [super _replacementKeyPathForBinding:aBinding];
@@ -138,11 +137,18 @@
     [self setContinuous:_autorepeat];
     [self addSubview:_buttonDown];
 
+    [self _sizeToFit];
     [self setNeedsLayout];
 }
 
-#pragma mark -
-#pragma mark Superclass overrides
+- (void)setControlSize:(CPControlSize)aControlSize
+{
+    [super setControlSize:aControlSize];
+    [self _sizeToFit];
+}
+
+// MARK: -
+// MARK: Superclass overrides
 
 /*!
     Set if the CPStepper is enabled or not.
@@ -159,8 +165,8 @@
 
 - (void)setFrame:(CGRect)aFrame
 {
-    var upSize = [self valueForThemeAttribute:@"up-button-size"],
-        downSize = [self valueForThemeAttribute:@"down-button-size"],
+    var upSize = [self currentValueForThemeAttribute:@"up-button-size"],
+        downSize = [self currentValueForThemeAttribute:@"down-button-size"],
         minSize = CGSizeMake(upSize.width, upSize.height + downSize.height),
         frame = CGRectMakeCopy(aFrame);
 
@@ -172,21 +178,22 @@
 /*! @ignore */
 - (void)layoutSubviews
 {
-    var aFrame = [self frame],
-        upSize = [self valueForThemeAttribute:@"up-button-size"],
-        downSize = [self valueForThemeAttribute:@"down-button-size"],
-        upFrame = CGRectMake(aFrame.size.width - upSize.width, 0, upSize.width, upSize.height),
-        downFrame = CGRectMake(aFrame.size.width - downSize.width, upSize.height, downSize.width, downSize.height);
+    var controlSizeThemeState = [self _controlSizeThemeState],
+        aFrame = [self frame],
+        upSize = [self valueForThemeAttribute:@"up-button-size" inState:controlSizeThemeState],
+        downSize = [self valueForThemeAttribute:@"down-button-size" inState:controlSizeThemeState],
+        upFrame = CGRectMake(0, 0, upSize.width, upSize.height),
+        downFrame = CGRectMake(0, upSize.height, downSize.width, downSize.height);
 
     [_buttonUp setFrame:upFrame];
     [_buttonDown setFrame:downFrame];
 
-    [_buttonUp setValue:[self valueForThemeAttribute:@"bezel-color-up-button" inState:CPThemeStateBordered] forThemeAttribute:@"bezel-color" inState:CPThemeStateBordered];
-    [_buttonUp setValue:[self valueForThemeAttribute:@"bezel-color-up-button" inState:CPThemeStateBordered | CPThemeStateDisabled] forThemeAttribute:@"bezel-color" inState:CPThemeStateBordered | CPThemeStateDisabled];
-    [_buttonUp setValue:[self valueForThemeAttribute:@"bezel-color-up-button" inState:CPThemeStateBordered | CPThemeStateHighlighted] forThemeAttribute:@"bezel-color" inState:CPThemeStateBordered | CPThemeStateHighlighted];
-    [_buttonDown setValue:[self valueForThemeAttribute:@"bezel-color-down-button" inState:CPThemeStateBordered] forThemeAttribute:@"bezel-color" inState:CPThemeStateBordered];
-    [_buttonDown setValue:[self valueForThemeAttribute:@"bezel-color-down-button" inState:CPThemeStateBordered | CPThemeStateDisabled] forThemeAttribute:@"bezel-color" inState:CPThemeStateBordered | CPThemeStateDisabled];
-    [_buttonDown setValue:[self valueForThemeAttribute:@"bezel-color-down-button" inState:CPThemeStateBordered | CPThemeStateHighlighted] forThemeAttribute:@"bezel-color" inState:CPThemeStateBordered | CPThemeStateHighlighted];
+    [_buttonUp setValue:[self valueForThemeAttribute:@"bezel-color-up-button" inStates:[controlSizeThemeState, CPThemeStateBordered]] forThemeAttribute:@"bezel-color" inStates:[CPThemeStateBordered, CPButtonStateBezelStyleRoundRect]];
+    [_buttonUp setValue:[self valueForThemeAttribute:@"bezel-color-up-button" inStates:[controlSizeThemeState, CPThemeStateBordered, CPThemeStateDisabled]] forThemeAttribute:@"bezel-color" inStates:[CPThemeStateBordered, CPThemeStateDisabled, CPButtonStateBezelStyleRoundRect]];
+    [_buttonUp setValue:[self valueForThemeAttribute:@"bezel-color-up-button" inStates:[controlSizeThemeState, CPThemeStateBordered, CPThemeStateHighlighted]] forThemeAttribute:@"bezel-color" inStates:[CPThemeStateBordered, CPThemeStateHighlighted, CPButtonStateBezelStyleRoundRect]];
+    [_buttonDown setValue:[self valueForThemeAttribute:@"bezel-color-down-button" inStates:[controlSizeThemeState, CPThemeStateBordered]] forThemeAttribute:@"bezel-color" inStates:[CPThemeStateBordered, CPButtonStateBezelStyleRoundRect]];
+    [_buttonDown setValue:[self valueForThemeAttribute:@"bezel-color-down-button" inStates:[controlSizeThemeState, CPThemeStateBordered, CPThemeStateDisabled]] forThemeAttribute:@"bezel-color" inStates:[CPThemeStateBordered, CPThemeStateDisabled, CPButtonStateBezelStyleRoundRect]];
+    [_buttonDown setValue:[self valueForThemeAttribute:@"bezel-color-down-button" inStates:[controlSizeThemeState, CPThemeStateBordered, CPThemeStateHighlighted]] forThemeAttribute:@"bezel-color" inStates:[CPThemeStateBordered, CPThemeStateHighlighted, CPButtonStateBezelStyleRoundRect]];
 }
 
 - (void)_sizeToFit
@@ -223,8 +230,8 @@
         [super setDoubleValue:aValue];
 }
 
-#pragma mark -
-#pragma mark Actions
+// MARK: -
+// MARK: Actions
 
 /*! @ignore */
 - (IBAction)_buttonDidClick:(id)aSender
@@ -232,7 +239,7 @@
     if (![self isEnabled])
         return;
 
-    if (aSender == _buttonUp)
+    if (aSender === _buttonUp)
         [self setDoubleValue:([self doubleValue] + _increment)];
     else
         [self setDoubleValue:([self doubleValue] - _increment)];
@@ -259,8 +266,8 @@
 }
 
 
-#pragma mark -
-#pragma mark Theming
+// MARK: -
+// MARK: Theming
 
 + (CPString)defaultThemeClass
 {
@@ -285,7 +292,7 @@
 
 - (void)_updatePlaceholdersWithOptions:(CPDictionary)options forBinding:(CPString)aBinding
 {
-    var placeholder = (aBinding == CPMaxValueBinding) ? [_source maxValue] : [_source minValue];
+    var placeholder = (aBinding === CPMaxValueBinding) ? [_source maxValue] : [_source minValue];
 
     [super _updatePlaceholdersWithOptions:options];
 
@@ -316,6 +323,7 @@ var CPStepperMinValue   = @"CPStepperMinValue",
         _autorepeat = [aCoder decodeBoolForKey:CPStepperAutorepeat];
 
         [self _init];
+        [self setEnabled:[self isEnabled]];
     }
 
     return self;